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.
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.
Progress bars have full tone support.
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
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).
||sets background color (unfilled portion)|
||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
--family-primary) are defined here.