shadcn.io is not affiliated with official shadcn/ui
Reading Progress Blog Block for React
Four articles you have opened as rows that lead with a progress ring, then the title, the time left and a Continue link; the header counts how many are still in progress.
Installation
Overview
A continue-reading shelf for React with Base UI, written for Turnleaf Review, a literary magazine. Four articles the visitor has opened are rows that each lead with a progress ring (the share read, drawn in your foreground colour, with the figure inside), then the title, the author and the time left, and a Continue link at the end (a phone puts it under the title). The header counts what is still open, derived from the rows: "3 in progress". A finished article shows a check in its ring and "Read again". The progress is example data and nothing is tracked. It's built from Guides and CircularProgress, and it's a static server component. For magazines, courses and docs that remember where a reader stopped.
FAQ
Where does the progress come from?
From ARTICLES at the top of the file: each has a progress from 0 to 100 and a length in minutes. The time left is derived (rounded up) and the header's count is the number of articles under 100. Feed it from your own store; the block tracks nothing itself.
How is the ring read by a screen reader?
The ring and its figure are decorative; the same facts are text in the row: the author, "6 min left" and a hidden "72 percent read". The link is named "Continue" followed by the article's title, so five links in a list stay distinct.
What does the Continue link cover?
The whole row: its after: box fills the row and carries the focus ring, so a click anywhere opens the article and the heading, ring and time are part of the target.
How does it fit on a phone?
The ring stays at the start, the Continue link moves under the title and the title wraps. The four rows take about one screen and nothing scrolls sideways at 320 pixels.
Related
- Pro
Reading List Blog
Reading toolsFive saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.
- 3Pro
Series Tracker Blog
Tutorials and seriesA reader's place in a six-part series: the catalog's vertical Steps with a tick for each part read, the current part's panel with a typographic cover, a thin progress bar and a Shine Button that continues to the next part.
- Pro
Pinned Posts Blog
Reading toolsThree pin slots in a tinted band above a list of posts: a pin toggle on each row fills the first empty slot, an empty slot reads Pin a post, and the band counts pinned posts.
- Pro
Tick-Off Checklist Blog
Tutorials and seriesA "before you start" checklist for a tutorial: six real checkboxes for tools and parts, struck through when ticked, with a count, a thin bar and a Reset.
- Pro
Latest Posts Blog
Featured storyJust published: the newest post as a lead band in large type with a pulsing dot and a New mark, three earlier posts as rows with unread dots, and a Mark all as read button.
- Pro
Recommendations Picker Blog
Reading toolsA Because you read picker: a Select chooses one of three reviews you read and four recommended reviews change with a drawn book spine, a thin match bar and a percentage, labelled as example data.