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

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.

--%

50%

of steps completed

%section.a-section.o-progress
  .a-content.o-progress__content
    .m-progress-ring.m-progress-ring--exciting{data: {'progress' => 50}}
      .m-progress-ring__container
        %svg.m-progress-ring__indicator{:viewBox => "0 0 100 100"}
          %defs
            %lineargradient#gradient
              %stop{:offset => "0%", "stop-color" => "#de00a5"}
              %stop{:offset => "100%", "stop-color" => "#0000ff"}
          %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

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.

%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

--%

75%

course complete