Progress

A block element to show completion, fullness, and other ratios


  • Display

    Block

  • Selectors

    .progress
  • Source

    GitHub ↗

  • Features

    Tones

75%
<progress class='progress' value='75' max='100'>75%</progress>

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.

75% 75% 75% 75% 75% 75%
Example code
<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

Categories

Design Architecture New York Urbanism

Example code
<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>

Customization

Name Type Default Description
--progress-height size sets height
--progress-background-color color Gray 300 sets background color (unfilled portion)
--color-core color sets fill color

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.