Progress Ring Card
Stat card with a centered inline SVG progress ring showing a single percentage, a used of total sub-line, and a plan limit footer row.
Stat card with a centered inline SVG progress ring showing a single percentage, a used of total sub-line, and a plan limit footer row.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Progress Ring Card shows a single percentage as an inline SVG ring, centered at 112 pixels. The ring has a muted track and a foreground fill arc ending with a rounded cap. The value, 73%, sits centered inside the ring. Below the ring a sub-line reads 146 GB of 200 GB used. A ruled footer carries Plan limit: 200 GB on the left and 54 GB free on the right.
The ring arc path is a pure function of the percentage constant, clamped at 99.99% so a full circle never becomes a degenerate line. No chart library is used.
Reach for this block wherever a single percentage is the primary fact, storage quotas, plan seat fill, budget consumed, or upload progress, replacing the constants with your live value and limit.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the storage quota ring. Other progress ring uses:
Tip: center the exact formatted value, not just the percentage, so users can confirm the number matches what they see in settings without switching views.