Overview

It’s a relatively simple progress bar, intended to be applied to an HTML <progress> element. At its core, a progress bar is a way to visualize a ratio.

Considerations

Color — The progress bar uses the --color-core, which is the ‘pure’ variant of the current section color. Don’t expect the progress bar to perfectly match the text surrounding it. (If it did, the progress bar would probably look too dark.)

Indeterminate values — A future version of a17t will include support for indeterminate progress bars. For now, consider using a loading spinner.

Variants

Progress bars have full tone support.

<progress class="progress ~neutral mb-4" value="75" max="100">75%</progress>

<progress class="progress ~positive mb-4" value="75" max="100">75%</progress>

<progress class="progress ~warning mb-4" value="75" max="100">75%</progress>

<progress class="progress ~critical mb-4" value="75" max="100">75%</progress>

<progress class="progress ~info mb-4" value="75" max="100">75%</progress>

<progress class="progress ~urge mb-4" value="75" max="100">75%</progress>

Accessibility

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

<p class="label mb-2">Categories</p>
<p><span class='chip ~neutral mb-1'>Design</span> <span class='chip ~neutral mb-1'>Architecture</span> <span class='chip ~neutral mb-1'>New York</span> <span class='chip ~neutral mb-1'>Urbanism</span></p>