Progress
The native <progress>, thin and square. Without a value it sweeps.
Examples
Progress
Tones
Anatomy
progress | The native element, no class. Full width; the fill uses the tone. |
API
| Attribute | Values | Description |
|---|---|---|
value | <n> | How much is done. Leave it out for the indeterminate sweep. |
max | <n> | The total. Default 1. |
data-tone | accentsuccesswarningdangerinfo | Colours the fill. Default accent. |
Accessibility
<progress>is a progressbar and announces its percentage. Label it with<label for>oraria-label.- Without
valueit is announced as busy with no amount; use it only when the length is unknown. - Put
aria-busy="true"on the region being loaded, and say what is happening in text ("Uploading 3 of 5").