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" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></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.

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

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

Label

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

25%

<div style="margin-bottom: 32px;">
  <div class="nj-progress">
    <div class="nj-progress__bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    <div 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