Progress

Since v1.2.0

View source

75%

50%

25%

<progress class="c-progress" max="100" value="75">75%</progress>
<progress class="c-progress" max="100" value="50">50%</progress>
<progress class="c-progress" max="100" value="25">25%</progress>
<progress class="c-progress" max="100"></progress>

How to use it on a <div>?

To use the .c-progress class on another element like a <div>, you must add specific attributes.

First, role and aria-* attributes are required to make it accessible.
Then, add a inline style to override the custom property --c-proress-value used to set the width in percentage.

The :indeterminate state is deducted by the absence of the aria-valuenow attribute.

<div className="c-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" style="--c-proress-value: 75%"></div>
<div className="c-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" style="--c-proress-value: 50%"></div>
<div className="c-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" style="--c-proress-value: 25%"></div>
<div className="c-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>