Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Progress ring

The Progress Ring represents the learner's total progress through a course and appears on the progress page. The animation of the border filling as the percentage increases rewards the learner with a visual representation of their progress.

Steps completed

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

--%

50%

of steps completed

%section.a-section.o-progress
  .a-content.o-progress__content
    .m-progress-ring{data: {'progress' => 50}}
      .m-progress-ring__container
        %svg.m-progress-ring__indicator{:viewBox => "0 0 100 100"}
          %circle.m-progress-ring__track{cx: "50", cy: "50", r: 48}
          %circle.m-progress-ring__fill{cx: "50", cy: "50", r: 48}
        %p.m-progress-ring__value.u-hide-if-js-unavailable{data: {'icon' => icon(:todo), 'progress' => 50}} --%
        %p.m-progress-ring__value.u-hide-if-js-available= safe_join([50, "%"], "")
        %p.m-progress-ring__text of steps completed

Average test score

This ring shows the average test scores on a course.

0%

99%

average test score

%section.a-section.o-progress
  .a-content.o-progress__content
    .m-progress-ring{data: {'progress' => 99}}
      .m-progress-ring__container
        %svg.m-progress-ring__indicator{:viewBox => "0 0 100 100"}
          %circle.m-progress-ring__track{cx: "50", cy: "50", r: 48}
          %circle.m-progress-ring__fill{cx: "50", cy: "50", r: 48}
        %p.m-progress-ring__value.u-hide-if-js-unavailable{data: {'icon' => icon(:progress), 'progress' => 99}} 0%
        %p.m-progress-ring__value.u-hide-if-js-available= safe_join(['99', "%"], "")
        %p.m-progress-ring__text average test score

Learner stats

The Learner stats for the Admin platform makes use of several modifiers.

Small/Medium/Large progress rings

Learner stats uses the m-progress-ring--small (64px) and m-progress-ring--medium (180px) progress rings (as opposed to the larger version shown above and on the learner progress page which is the standard m-progress-ring).

Plain progress rings

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

--%

75%

course complete

%section.a-section.o-progress.o-progress--plain
  .a-content.o-progress__content
    .m-progress-ring.m-progress-ring--plain.m-progress-ring--medium{data: {'progress' => 75}}
      .m-progress-ring__container
        %svg.m-progress-ring__indicator{:viewBox => "0 0 100 100"}
          %circle.m-progress-ring__track{cx: "50", cy: "50", r: 48}
          %circle.m-progress-ring__fill{cx: "50", cy: "50", r: 48}
        %p.m-progress-ring__value.u-hide-if-js-unavailable{data: {'progress' => 75}} --%
        %p.m-progress-ring__value.u-hide-if-js-available= safe_join([75, "%"], "")
        %p.m-progress-ring__text course complete