Progress

<progress class="progress" min="0" max="100" value="0" />
<progress class="progress" min="0" max="100" value="20" />
<progress class="progress" min="0" max="100" value="50" />
<progress class="progress" min="0" max="100" value="70" />
<progress class="progress" min="0" max="100" />

Note: Using progress element is deprecated due to shadow DOM's poor standardization.

For example

• ::-webkit-progress-bar does not have animation due to a Chrome feature.
• ::-moz-progress-bar does not have transition animation due to a Firefox feature.

Therefore, we suggest using custom elements for .progress.

With custom elements

<div class="progress" style="--value:20" />
<div class="progress" style="--value:40" />
<div class="progress" style="--value:80" />
<div class="progress" />

Transitions