Progress bar

figma:ready

react:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

Usage

Code

Accessibility

Import


@import 'settings-tools/all-settings';
@import 'components/c.progressbar';

Usage

The code of the ProgressBar component is structured as follows:

A global div with the class: mc-progressbar.
An inner div with the class: mc-progressbar__indicator.
A div element indicating in a textual way the value of the current percentage with the class: mc-progressbar__percentage.


<div class="mc-progressbar">
  <div
    class="mc-progressbar__indicator"
    role="progressbar"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 25%;"
  >
    &nbsp;
  </div>
  <div class="mc-progressbar__percentage">25%</div>
</div>

Good to know

The mc-progressbar__indicator div must always be present in your code to ensure a good level of accessibility to the component.

Note however that by default this element will be visually hidden.

However, you have the possibility to make this element visible if needed (read more about this above).

The style attribute

The style attribute on the mc-progressbar__indicator element allows you to manage the width of the progress indicator by updating the width property in real time as the load progresses.

Accessibility rules

As you can see from the code above, many aria attributes are on the mc-progressbar__indicator element.

Some of these attributes are mandatory and must always appear in your code in order to comply with accessibility rules.

We recommend that you read the page dedicated to the accessibility of this component in order to learn more.

Variations

Sizes

You can create your ProgressBar component using one of the two following size formats:

extra small: by adding the mc-progressbar--xs modifier to the mc-progressbar element.
small: by adding the mc-progressbar--s modifier to the mc-progressbar element.
medium: this is the default format, therefore it does not need to add a modifier.

Percentage progress

In some cases, it may be necessary to explicitly show to the user the percentage change in the progress bar.

To do this, you can add the mc-progressbar--percent modifier to the mc-progressbar element.

Note that the height of the component changes to 24px when using the mc-progressbar--percent modifier, in order to allow the optimal display of the percentage.

The mc-progressbar--half modifier

In order to respect the accessibility criteria, the color of the percentage text must be updated according to the position of the progress bar.

So when the percentage value is 51% or more, please apply the mc-progressbar--half modification to your component.