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
Week Progress

Week progress allows learners to track their progress within a step of a week It is displayed in the form of a progress bar with a text label.

This molecule's key functions are to:

  • show your progress of the week of the current step
  • show how many steps you have completed or have left to go

The text label changes depending on how far along you are. The logic is:

  • Less than half completed: "You've completed X steps in week X"
  • Half completed: "You're halfway through"
  • More than half completed: "X more steps to go"
  • All completed: "You've completed week X"

The purpose of the changing text is to encourage and motivate the learner to continue to the end.

The week progress can be added by including the week_progress partial which renders the following markup:

.m-week-progress
  %span.m-week-progress__label
    You’ve completed 4 steps in week 2
  .m-week-progress__bar
    %span.m-week-progress__bar__fill{style: "width: 40%"}