Progress ring

Purpose

The Progress Ring represents the learner's total progress through a course and its used for different purposes.

Live Examples

Example of progress ring

Description


Elements

The Progress Ring is made up of an oval shape that animates to show the learners total percentage of the course they are completing. 


Variants

Average test score

This ring shows the average test scores on a course.


Screenshot 2018 02 14 11 31 52

Steps completed

This ring represents total progress through the steps of a course.

Screenshot 2018 02 14 10 49 08

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.

Screenshot 2018 02 14 11 32 24

Plain progress rings

Plain progress rings are a thicker, blue progress track used together with .o-progress--plain to remove the gradient background.

Screenshot 2018 02 14 11 33 31