Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies

This is a new service - your feedback will help us to improve it.


Progress indicator


What does it do?

  • It is visual representation of progress through a set of steps that guides user in order to complete a specified process. Knowing where the user is in their progress can help improve their orientation within the system. It sets expectations and gives and impression of activity and progress.

When to use it?

  • When you want to tell users where they are in the process.
  • When you want to reassure users that the system is working and reduce user’s uncertainty.

When not to use it?

  • When progress cannot be measured and therefore does not have a percentage that indicates the amount of progress.

Section 1 of X

Section Name

HTML markup
<div class="wmnds-progress-indicator">
  Section 1 of X
  <h4>Section Name</h4>

Nunjucks markup
{% from "wmnds/components/form-elements/progress-indicator/_progress-indicator.njk" import wmndsProgressIndicator %}

      currentSection: "1",
      totalSections: "X",
      sectionName: "Section Name"

Nunjucks properties
currentSectionstringRequired. Specifies the section which the user is currently on.
totalSectionsstringRequired. Specifies the total number of sections in the sequence.
sectionNamestringRequired. Text to describe the name or title of the current section.