Progress
The native progress element as a thin bar in a hue, filled to its value, or striped and moving when it has none.
Example
View Code
<progress class="progress" value="40" max="100" aria-label="Upload">40%</progress>
When to use it
Work with a known length: an upload, a wizard's steps, a quota. Leave the value off for work whose length is unknown and the bar says "busy" instead of "40%".
How it works
The native progress element, with its own drawing switched off and a thin rounded track in its place. The filled part is the hue, through the engines' own pseudo-elements, and slides when the value changes. Without a value the element is indeterminate: the track takes diagonal stripes that move along it. data-size sets the thickness to half of the size's space step.
<progress class="progress" data-variant="success" data-size="lg" value="3" max="5" aria-label="Steps">3 of 5</progress>
<progress class="progress" aria-label="Loading">Loading</progress>
Accessibility
A progress element is a progress bar to assistive tech already; it needs a name, from aria-label or aria-labelledby. Keep the text between the tags current, since some readers announce that rather than the value. An indeterminate bar is announced as busy with no percentage, which is right.
Attributes
| Attribute | Type | Values | Default | Description |
|---|---|---|---|---|
data-variant |
enum | primary, secondary, success, warning, alert, neutral |
primary |
The hue of the filled part. |
data-size |
enum | sm, md, lg |
md |
The bar's thickness: half the size's space step. |
Children
No structural requirements.
Tokens
| Token | Description |
|---|---|
--yeti-progress-radius |
Corner of the bar and of its value. |
--yeti-color-surface-sunken |
The track. |
--yeti-color-primary |
The default variant's colour, when data-variant is absent. |
--yeti-color-primary-subtle |
The default variant's tint. |
--yeti-color-primary-soft |
The default variant's soft stop. |
--yeti-color-primary-strong |
The default variant's strong stop. |
--yeti-color-primary-text |
The default variant's text colour. |
--yeti-on-primary |
Text on the default variant's colour. |
--yeti-text-md |
The text step when data-size is absent. |
--yeti-space-sm |
The space step when data-size is absent; the bar's height follows it. |
--yeti-duration-base |
How long the value takes to move; one cycle of the indeterminate sweep is four of it. |
--yeti-ease |
The curve of the value's move. |
--yeti-motion-iterations |
How many times the indeterminate sweep repeats; one under reduced motion. |
Internal tokens (may change between minor versions)
- `--_yeti-variant` - `--_yeti-variant-subtle` - `--_yeti-size-space` - `--_yeti-variant-soft` - `--_yeti-variant-strong` - `--_yeti-variant-text` - `--_yeti-on-variant` - `--_yeti-size-text`Accessibility
- Required attributes:
aria-labeloraria-labelledby - Put the class on a progress element and give it a name with aria-label or aria-labelledby. Keep its text content current ("40%"), since older assistive tech reads that. Leave out value for work whose length is unknown; the element is then indeterminate and says so.
Browser support
- Used without guards: appearance: none on progress
- Behind
@supports: nothing
JavaScript
None. This component is CSS only.
Available since 7.0.0.