shadcn.io is not affiliated with official shadcn/ui
Concentric Rings Stats Block for Svelte
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 Svelte with Ark 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.