Progress bar
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%;" > </div> <div class="mc-progressbar__percentage">25%</div></div>
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 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.
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 themc-progressbar
element. - small: by adding the
mc-progressbar--s
modifier to themc-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.