shadcn.io is not affiliated with official shadcn/ui
Concentric Rings Stats Block for React
A music-practice tracker's three daily goals as nested rings with rounded ends, each running clockwise as far as the minutes played, with a goal that is met drawn as a ring that has closed, and three hairline cells that read minutes against goal.
Installation
Overview
Three concentric progress rings for React with Base UI. A split: at the start, a header ("1 of 3 rings closed today") over the day's three practice goals as cells in one hairline frame; at the end, the rings. Each ring is a goal (Pieces, Scales and Sight-reading), outermost first: an arc with rounded ends that starts at twelve o'clock and runs clockwise as far as the minutes played, over a faint track, in solid foreground weights (100, 65 and 40 percent). A goal that is met is a ring that has closed all the way round, and its cell says so with a check. Each cell reads the minutes played (they roll up once) over the goal, then the minutes still to go and the share. A music note sits in the hole. Every arc, share and the headline is computed from one typed list of goals, so the drawing and the text agree. On a phone the header comes first, then the rings (about 288 px), then the three cells. It's built from SlidingNumber, with SVG circles for the rings.
FAQ
How do I change the goals?
Edit PRACTICES at the top of the file: each goal has a label, the minutes played and the goal, outermost ring first. Three rings fit the three radii in RADII and the three WEIGHTS; add a radius and a weight for a fourth. The arcs, shares, cells, the count of closed rings and the minutes still to go are all computed from the list.
How do the rounded ends line up with the share?
A rounded end sticks out half a ring-width past the end of a dash. goalOf shortens the dash by one ring-width and moves it forward by half of one, so the drawn arc, ends included, runs from twelve o'clock to exactly the share played. A goal that is met is drawn as the whole ring, so the ends meet and it reads as closed.
How is a closed ring shown, without colour?
A ring that has closed is a full circle in its weight, and its cell swaps the minutes-to-go line for a check and "Ring closed". Nothing depends on a hue: the weight, the full circle and the words say it.
Is it accessible?
The cells are a description list (a term for the goal, the minutes and the goal as descriptions, then what is left), so a screen reader reads every number. The rings are one image with a text alternative that lists each goal and its minutes. With reduced motion the arcs and the digits appear at once.
Related
- Pro
Goal Ring Tiles Stats
Goals and progressFour goal tiles for an OKR tool, each a thin ring with the part done drawn solid, the part today's pace will add drawn lighter after it and a tick for the target, with the projected finish in words.
- Pro
Two-Ring Donut Stats
Parts of a wholeA headcount donut with two rings: the departments' groups inside and their teams outside, each team sitting in its own group's arc, with a nested legend whose shares add up at every level.
- Pro
Tick Dial Hero Metric Stats
Hero metricA hero figure for a crowdfunding page as a dial of sixty radial ticks, the share raised drawn at full weight, with the amount raised in the middle and the percent funded beside it.
- Pro
Half Donut Card Stats
Parts of a wholeA team's weekly capacity as a 180-degree arc of four segments with the total in its foot and a four-cell legend band, with no needle: one whole, shared out.
- Pro
OKR Target Cards Stats
Goals and progressThree objective cards for an OKR tool, each with a large completion percent that is the mean of its three key results, nested key-result bars with current and target, and a line naming the key result furthest from its goal.
- Pro
Target Ratio Progress Stats
Goals and progressFive team rows led by a booked-over-quota ratio at display size, each with a bar along the row's floor and the share and the gap written at the end.