Progress bars
Styling for the native <progress> element. Add .progress.
Give it a value for a known amount; omit value for an indeterminate, animated bar. The text content is the fallback / accessible name.
Colours
A palette-family class recolours the fill: .primary, .secondary, .success, .warning, .error, or .soft. New families in $colors get a variant automatically.
Motion
The indeterminate sweep respects prefers-reduced-motion — it slows to a crawl rather than stopping, since an indeterminate bar still has to signal activity. In Windows High Contrast mode it becomes a pulsing Highlight bar.
Overriding
- One bar / a scoped rule — set the --jf-progress-bar-* custom properties (tabled below) on .progress or a scoped selector.
- Shape — the Sass variables below.
Variables
Sass variables
| Name | Default | Notes |
|---|---|---|
| $generate-progressbar | true | Emit the .progress CSS at all. |
| $progressbar-height | get-size(1) (16px) | Bar thickness. |
| $progressbar-border-radius | token(radius-md) | Track corner radius. |
| $progressbar-value-border-radius | token(radius-none) (0) | Corner radius of the filled portion. Square by default so a part-full bar meets the track edge cleanly. |
| $progressbar-indeterminate-duration | 10s | One sweep of the indeterminate animation. Slowed, not stopped, under prefers-reduced-motion — an indeterminate bar still has to signal activity. |
Custom properties
| Name | Default | Notes |
|---|---|---|
| --jf-progress-bar-color | neutral / 500 | The filled portion. |
| --jf-progress-bar-color-unknown | neutral / muted | The indeterminate sweep. |
| --jf-progress-bar-bg-color | neutral / subtle | The track behind the fill. |