Search blocks by description or jump to a page.
Ring shaped progress dials that animate to a percentage value. Good for dashboards or landing pages that report completion rates and capacity at a glance.
Circular Progress opens with a centered heading section: a small outline badge, a bold headline, and a short supporting sentence. Below that, three category tabs ("Business Metrics," "Technical Metrics," "Customer Metrics") sit in a pill group on desktop. Selecting a tab swaps in a four-column grid of cards, each card holding a ring dial, a numeric value centered inside the ring, a label below the dial, and a one-line context note beneath the label. On mobile the tab row collapses into a full-width dropdown, and the grid stacks to two columns.
The heading copy, badge text, and category names are all independent strings you can replace. Each category holds four stats, each with its own label, numeric value, suffix, and context note. You can trim to two categories or two cards per category if your data set is smaller. The color of each ring and its centered value shifts automatically based on the numeric value, so the visual encoding updates without extra work when you change the numbers.
Reach for this block when you need to show several percentage-based metrics grouped by theme and want readers to scan the whole picture without wading through a table. It fits well on a product outcomes page, a quarterly review section, or a healthcare scheduling platform reporting appointment fill rates, no-show percentages, and provider utilization across departments. Compared to a plain stat grid, the ring shape makes the distance from 100 immediately readable rather than asking the eye to parse raw numbers alone.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The primary fit is any set of percentage-based KPIs you want grouped by category. A few other directions work just as well:
Tip: values above 100 (like an ROI figure) still render as a full ring because the SVG offset calculation caps at the full circumference, so label those metrics clearly so readers know the ring represents saturation rather than a literal percentage of capacity.