No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Progress Ring
The Progress Ring component displays learner progress data in an animated graphic form.
94%
of dogs are cool
How it works
The component consists of a 4px keylined circle, an optional icon, large percentage number and
descriptive text. The keyline and percentage number animates on to reveal the final percentage
total.
We currently use the Progress Ring to show:
  • the percentage of steps in a course that a learner has completed
  • the average percentage a learner has scored on course tests
Variants
Standard
When a Progress Ring appears on light backgrounds the text and icon are dark grey, the circle
keyline is medium grey and the keyline percentage fill appears as a blue to pink gradient.
0%
course completed
Inverse
When a Progress Ring appears on dark or coloured backgrounds the text and icon are white. The circle
keyline is white with a 50% transparency, the percentage fill is solid white.
0%
of steps completed
NameDescriptionDefault
percent
number
0
isInverse
bool
false
icon
string
-
text
string
-