Determinate movement toward a visible end.
| Prop | Type | Notes |
|---|---|---|
| value | number (0–100) | Determinate fill; omit for indeterminate |
| variant | bar · circular · top | Linear track, SVG ring, or a page-load top bar |
| top (page load) | — | Thin bar pinned to the top edge; trickles up, then completes |
| size | S · M · L | Bar height 4 / 6 / 9px |
| showValue / label | boolean / string | Percent readout and a leading label |
| indeterminate | boolean | Sliding fill when progress is unknown |
Use Progress when you can measure how far along a task is. For an unmeasurable wait use a Loader; for multi-step flows use a Stepper.
Show the number when you can. A percent is a promise kept.
Don't sit at 100% while still working. Snap to full only when done.
Use the indeterminate slide only when you truly can't measure.
Don't let the bar jump backward. Progress moves one way.
File and media uploads with a live percent.
Quota and usage meters toward a limit.
Compact ring for cards and dashboards.
| Token | Value | Role |
|---|---|---|
| --prog-h | 4 / 6 / 9px | Bar heights S / M / L |
| --prog-track | #242428 | Unfilled track |
| --prog-fill | #FF7A00 | Progress fill |
| --prog-done | #1FA35C | Completed at 100% |
| --prog-radius | 999px | Fully rounded track and fill |
| --prog-ease | 0.35s | Fill width transition |
<div class="o-prog">
<div class="o-prog__head"><span>Uploading</span><b>62%</b></div>
<div class="o-prog__bar">
<div class="o-prog__fill" style="width:62%"
role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>