<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.
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.