The Progress Ring represents the learner's total progress through a course and its used for different purposes.
Example of progress ring
The Progress Ring is made up of an oval shape that animates to show the learners total percentage of the course they are completing.
Average test score
This ring shows the average test scores on a course.
This ring represents total progress through the steps of a course.
Exciting Progress Ring
This ring is used in places where we promote a learner to Upgrade, displaying progress in an eye catching way, so we might convince then not to lose their progress.
The exciting progress ring does need a gradient adding to the SVG, which unfortunately can not use our colour functions, and must be hardcoded hash values.
Plain progress rings
Plain progress rings are a thicker, blue progress track used together with
.o-progress--plain to remove the gradient background.