Progress bar

Progress bars allow users to know their task was successfully launched and the system progresses towards task completion. They are a representation of a progress status that evolves over time. As a general rule of thumb, use progress bars when task completion takes longer than 1 second.

Angular

React

Vanilla

Figma

Last updated v5.0.0

Example

<div class="nj-progress">
  <div class="nj-progress__bar" role="progressbar" aria-label="Label of progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <span class="nj-sr-only">25%</span>
  </div>
</div>

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

We use the .nj-progress as a wrapper to indicate the max value of the progress bar.
We use the inner .nj-progress__bar to indicate the progress so far.
We use the inner .nj-progress__text to attach a text (e.g. the progress percentage).
The .nj-progress__bar requires an inline style, utility class, or custom CSS to set their width.
The .nj-progress__bar also requires some role and aria attributes to make it accessible. Use a .nj-sr-only span to specify the value to screen readers.

Put that all together, and you have the following examples.

<div style="display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px;">
    <div class="nj-progress">
      <div class="nj-progress__bar" role="progressbar" aria-label="Label of progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        <span class="nj-sr-only">0%</span>
      </div>
    </div>
    <div class="nj-progress">
      <div class="nj-progress__bar" role="progressbar" aria-label="Label of progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <span class="nj-sr-only">25%</span>
      </div>
    </div>
    <div class="nj-progress">
      <div class="nj-progress__bar" role="progressbar" aria-label="Label of progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        <span class="nj-sr-only">50%</span>
      </div>
    </div>
    <div class="nj-progress">
      <div class="nj-progress__bar" role="progressbar" aria-label="Label of progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        <span class="nj-sr-only">75%</span>
      </div>
    </div>
    <div class="nj-progress">
      <div class="nj-progress__bar" role="progressbar" aria-label="Label of progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <span class="nj-sr-only">100%</span>
      </div>
    </div></div>

Label

Add a label to your progress bars by placing text within the .nj-progress__text.

<div style="display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px;">
  <div class="nj-progress">
    <div class="nj-progress__bar" role="progressbar" aria-label="Label of progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
      <span class="nj-sr-only">25%</span>
    </div>
    <div aria-hidden="true" class="nj-progress__text">25%</div>
  </div>
</div>

In terms of accessibility, be mindful of people using assistive technologies: make sure proper aria attributes will be implemented so that progress is not provided only visually.

Pagination

Radio-button