Progress

When to use it

The Progress component is used to visually indicate the progress of a task or process. It provides a way for users to see how much of the task has been completed and how much is remaining.

Variants

Use the .c-progress--alt modifier for an alternative color scheme. Add the .c-progress--small or .c-progress--large modifier for a smaller or larger look. Using .c-progress--animated adds an animation.

What it looks like

Code examples

Default

<progress class="c-progress" value="80" min="0" max="100" aria-label="Progress 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></progress>

Size variants

<progress class="c-progress c-progress--large" value="70" min="0" max="100" aria-label="Progress 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></progress>
<progress class="c-progress c-progress--small" value="30" min="0" max="100" aria-label="Progress 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></progress>

Animated

<progress class="c-progress c-progress--animated" value="60" min="0" max="100" aria-label="Progress 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></progress>

Alt color

<progress class="c-progress c-progress--alt" value="70" min="0" max="100" aria-label="Progress 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></progress>

With value before

<div class="c-progress__value">
    <span>6</span>
    <span>10</span>
</div>
<progress class="c-progress c-progress--alt" value="60" min="0" max="100" aria-label="Progress 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></progress>

With value after

<progress class="c-progress c-progress--alt" value="60" min="0" max="100" aria-label="Progress 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></progress>
<div class="c-progress__value">60%</div>

Accessibility notes

• Ensure the <progress> element has an accessible name. This can be done using the aria-label or aria-labelledby attributes.
• Provide a text alternative that describes the current status of the progress. This can be done using the aria-valuenow, aria-valuemin, and aria-valuemax attributes.
• Avoid using the progress bar for critical information that users need to act upon immediately, as it may not be accessible to all users.
• Provide an alternative way to convey the progress information, such as a text description or a percentage value.