Progress
Native <progress> bars (determinate or indeterminate, three sizes, register tones) and a spinner for short unmeasured waits.
Examples
Determinate and indeterminate
HTML for “Determinate and indeterminate”
<div class="mp-stack">
<div class="mp-field">
<label class="mp-field__label" for="progress-course">Course completion — 64%</label>
<progress class="mp-progress" id="progress-course" value="64" max="100" data-tone="human">64%</progress>
</div>
<div class="mp-field">
<label class="mp-field__label" for="progress-upload">Uploading materials</label>
<progress class="mp-progress" id="progress-upload" data-size="sm"></progress>
</div>
<div class="mp-field">
<label class="mp-field__label" for="progress-gate">Modules completed — 8 of 8</label>
<progress class="mp-progress" id="progress-gate" value="8" max="8" data-tone="success" data-size="lg">8 of 8</progress>
</div>
</div>Spinner
HTML for “Spinner”
<div class="mp-cluster">
<span class="mp-spinner" aria-hidden="true"></span>
<span class="type-small" role="status">Generating feedback…</span>
</div>Guidance
Uses the native <progress> element, so value, max and the indeterminate state are announced by assistive tech without extra ARIA. Default value color is teal (digital: systems at work); data-tone="human" for learner progress.
Accessibility
- Label every progress bar (
<label for>oraria-label); include the number in the label when it matters. - A spinner is decorative — announce the wait with visible text in a
role="status"element. - Under reduced motion the indeterminate bar holds in the middle and the spinner becomes a full ring; both pulse in place (
--duration-loop), so the wait never looks frozen.
API
| Class | Kind |
|---|---|
.mp-progress | root |
.mp-spinner | root |
| Attribute | Values |
|---|---|
data-tone | human · success |
data-size | sm · lg |
States styled: :indeterminate. Set the native attribute or ARIA state; there are no state classes.
| Token | Default | Light · dark |
|---|---|---|
--mp-progress-height | 0.5rem | — |
--mp-progress-track | var(--color-bg-tertiary) | #E2DCD2 · #2E2E34 |
--mp-progress-value | var(--color-action-secondary) | #1B756D · #3AAFA8 |
--mp-spinner-size | 1.25rem | — |
Design tokens consumed: --border-width-medium --color-action-primary --color-action-secondary --color-bg-tertiary --color-success-text --duration-loop --ease-in-out --radius-full --transition-default
Verified contrast
The build measures each pair for the defaults and for every tone, variant and state that reassigns a token, over page and card surfaces. The ratios below are the worst case in each mode; a pair below its minimum stops the build.
| Use | Pair | Light | Dark | Minimum |
|---|---|---|---|---|
| progress value vs track | --mp-progress-value on --mp-progress-track | 3.62 | 4.06 | 3.0 |