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.

React

Angular

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

Fluid Design System provides a handful of utilities for setting width. Depending on your needs, these may help with quickly configuring progress.

<div class="nj-progress">
  <div class="nj-progress__bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Color variation

Use modifier classes to change the appearance of individual progress bars.

<div class="nj-progress nj-progress--violet mb-3">
  <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 nj-progress--yellow mb-3">
  <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 nj-progress--cerise mb-3">
  <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 nj-progress--orange mb-3">
  <div class="nj-progress__bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Labels

Add labels to your progress bars by placing text within the .nj-progress-bar.

25%

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

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