Contents

Open this example (Progress bar example) in a new tab 

      
  
  <div class="ncs-progress">
   
    <span class="ncs-progress__count govuk-body">
      <strong class="govuk-!-font-size-36">
        10% <strong class="govuk-visually-hidden">Complete</strong>
      </strong>
    </span>
    
    <div class="ncs-progress__bar">
      <span class="ncs-progress__10"></span>
    </div>
  
  </div>

When to use this component

You can use a progress bar on forms and assessments on the National Careers Service website.

This sets expectations for users, allowing them to understand where they are in the journey and how much longer they have until they've completed the task.

When not to use this component

You do not need a progress bar on forms that are simple and short.

Only add a progress bar if you can do so reliably with the number shown increasing as the user moves through the form.

How to use this component

You can copy the HTML and paste it where you'd like to display the progress bar on your page.

Contribute to this page on GitHub