Progress bar
Determinate progress for uploads and onboarding. Fill grows from the inline start.
40%
100%
72%
<div class="stack" style="width:100%;max-width:420px">
<div class="px-progress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="Upload"><div class="px-progress__track"><span class="px-progress__fill" style="--v:40%"></span></div><span class="px-progress__label">40%</span></div>
<div class="px-progress px-progress--success" role="progressbar" aria-valuenow="100" aria-label="Done"><div class="px-progress__track"><span class="px-progress__fill" style="--v:100%"></span></div><span class="px-progress__label">100%</span></div>
<div class="px-progress px-progress--danger" role="progressbar" aria-valuenow="72" aria-label="Storage"><div class="px-progress__track"><span class="px-progress__fill" style="--v:72%"></span></div><span class="px-progress__label">72%</span></div>
</div>Usage
- Use a Spinner for unknown waits.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-progress · --success · --danger · --bottom | class | Tone and label position. |
--v | CSS var | Fill value, e.g. style="--v:40%". |
Figma properties
Progress bar18 variants · page “Progress Bar”Open
Determinate progress (uploads, onboarding steps). Fill width = value %; in RTL the fill grows from the right. role=progressbar with aria-valuenow. Use Spinner for indeterminate waits.
| Property | Type | Values |
|---|---|---|
| Value label | Text | “40%” |
| Label | Variant | None Right Bottom |
| Tone | Variant | Brand Success Danger |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-progress-track | color-surface-sunken | #f9fafb |
--px-progress-fill | color-background-brand-default | #2563eb |
--px-progress-height | 8px | 8px |
--px-progress-radius | radius-full | 999px |
--px-progress-label | color-content-neutral-primary | #101828 |
Accessibility
- role="progressbar" with aria-valuenow.