Circular Progress Bar
A ring that fills clockwise to show progress or a share of a whole, with the value in the middle. It fits where a line bar would not: cards, tiles, avatars.
Preview
Size
When to use
- For a single value in a compact, square space: a score, a goal, a completion.
- For several small indicators side by side on a dashboard.
Reach for something else
- For long tasks with a label and details: a Line Progress Bar reads better.
Anatomy
- 1
Track
The full ring, in light grey.
- 2
Arc
The progress, starting at the top, with rounded ends.
- 3
Value
The percentage in the centre, where the size allows.
States
In progress
The arc in the brand colour.
Complete
A full ring.
Warning
Amber, near a limit.
Sizes
Small rings drop the centre value and show it beside.
Accessibility
- role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax and a label.
- The SVG ring is aria-hidden; the value is exposed once, through the progressbar.
Source
The Circular Progress Bar is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
Tell me when the source landsTell me when the source landsand you'll get 10% off your first licence if you ever want the full library.
See it in a block