Progress
Shows task progress, supporting line / circle / dashboard forms, status colors, indeterminate state, custom colors and text, stripes, step segments, buffer segments, and more.
Basic usage
Basic usage
percent is the current progress value (default range 0–100, clamped automatically); when it reaches 100 with no status set, success green is shown. value is an alias of percent (percent wins when both are set), so writing value works the same.
Status
Status
status supports success (green) / warning (orange) / error (red) semantic colors, taking priority over the automatic success green at 100%.
Hidden text
Hidden text
no-text hides the side/center percentage; show-text="false" is equivalent.
Circle progress
Circle
The circle defaults to a 48px diameter and 6px stroke, showing the percentage in the center; type="circle" switches the form.
Circle size & stroke width
Size / stroke width
Circle status
Circle status colors & status icons
status="success|error|warning" recolors the ring and replaces the center percentage with the matching status icon (✓ / ✗ / alert, real SVG icons); the success icon also shows at 100% without an explicit status.
Dynamic progress
Dynamic progress
Indeterminate
Indeterminate loading
indeterminate means "in progress with unknown duration": it ignores percent / steps / buffer / striped; line shows a sweeping bar, circle / dashboard a rotating arc; aria-valuenow is removed per the APG. The label attribute provides an accessible name for screen readers (invisible).
Dashboard
Dashboard
type="dashboard" is a gauge form with a bottom opening (270° usable arc); size / stroke-width / status / color / stroke-linecap work the same as circle; the default slot projects into the gauge center (e.g. 75/128G above).
Custom colors
color / track-color
color / track-color accept 11 preset palette names (theme tokens, dark-adaptive) or any CSS color string; color also accepts gradient strings (line form recommended — ring strokes cannot consume linear-gradient() background syntax). An explicit color takes priority over status colors.
Custom text
Default slot custom text
The default slot overrides the built-in percentage: line projects into the side text area, circle / dashboard into the center, and takes priority over status icons.
Stripes
striped / striped-flow
striped overlays diagonal stripes (density adapts to track height); striped-flow animates them (implies striped when used alone); line form only.
Steps
steps segments
steps splits the line into N equal segments (gap overridable via --oas-progress-step-gap); the lit count follows percent with rounding; line form only.
Buffer
buffer (video/download)
buffer (same value range as percent) renders a light buffer segment on the track with the main progress on top; line form only.
Line thickness & inside text
size / stroke-width / text-inside
For the line form, size is a height tier (small 4px / medium 8px / large 12px) and stroke-width sets the track height directly (px, priority over tiers); text-inside moves text into the bar (track height auto-lifts when not explicitly set); the label sits inside the filled segment only and hides when the fill is too narrow (under ~6ch), so no half-digit ever shows over the track.
Vertical progress
vertical turns the line form vertical: the track becomes a column, thickness still comes from the size / stroke-width tiers, and the fill grows bottom-up. height sets the vertical length (plain numbers are px; vh/% units are accepted; invalid values fall back to the default 200px; the attribute is ignored in horizontal mode). circle / dashboard are unaffected by vertical.
vertical progress
Linecap
stroke-linecap
stroke-linecap controls the progress arc cap of circle / dashboard: round (default) / butt; not applicable to the line form.
Value range
max
max defines the full value (default 100): percent / buffer mean "current value" (clamped to 0–max), width and percentage are computed as value / max, and aria-valuenow / aria-valuemax sync real values.
Accessibility
role="progressbar"+aria-valuenow/aria-valuemin/aria-valuemaxsync across forms;aria-valuenowis removed in the indeterminate state per the APG.- The
labelattribute writesaria-label, giving screen readers a readable name (invisible; see the "Indeterminate" demo). - Component CSS variable openings:
--oas-progress-color/--oas-progress-track-color/--oas-progress-height/--oas-progress-buffer-color/--oas-progress-stripe-color/--oas-progress-stripe-size/--oas-progress-step-gap/--oas-progress-inside-color/--oas-progress-duration.
API
oas-progress
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
buffer | Buffer value (line only, clamped to 0–max): static buffered segment behind the main bar for streaming/loading scenarios | string | — |
color | Progress color: preset name (via --oas-preset-* tokens) or any CSS color/gradient string (gradients recommended for line); wins over status colors and the full-value green | string | — |
height | Vertical length (vertical only): plain numbers are px; px/vh/% accepted; invalid falls back to the default | string | — |
indeterminate | Indeterminate loading: ignores percent/steps/buffer/striped and drops aria-valuenow (APG); sweeping bar (line) or rotating segmented arc (circle/dashboard) | boolean | — |
label | Accessible name (written to the progress bar aria-label) | — | — |
max | Value range upper bound (default 100): percent/buffer read as current values; width and text are computed as value/max and aria reflects real values | string | 100 |
no-text | Hide the side/center percentage text | boolean | — |
percent | Progress percentage (0–100, clamped automatically) | string | 0 |
show-text | Whether to show the percentage text | string | true |
size | Size: line = height preset small(4px) / medium(8px, default) / large(12px); circle/dashboard = diameter in px (default 48) | string | 48 |
status | Status color; error red, success green; when unset and progress reaches 100, success green is shown | string | — |
steps | Stepped segments (line only): integer ≥2 equal segments; lit count = round(percent × steps) | string | — |
striped | Striped texture (line only) | boolean | — |
striped-flow | Animated flowing stripes (line only; implies striped when used alone) | boolean | — |
stroke-linecap | Arc line cap round (default) / butt (circle/dashboard) | string | round |
stroke-width | Stroke width in px: circle/dashboard ring thickness (default 6); line track height (wins over the size preset) | string | 6 |
text-inside | Text inside the bar (line only; the track auto-grows to fit text when no explicit thickness is set) | boolean | — |
track-color | Track color: same protocol as color | string | — |
type | Shape: line (default) / circle / dashboard (gauge: 270° arc open at the bottom) | string | line |
value | Alias of percent (current value, clamped to 0–max): when both are set percent wins; read only when percent is absent | string | 0 |
vertical | Vertical orientation (line form only): vertical track filling bottom-up; circle/dashboard unaffected | boolean | — |
Slots
| Name | Description |
|---|---|
| default | Custom text: right of the line / inside the bar (text-inside) / circle center; wins over status icons and the built-in percentage |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-progress-buffer-color | color-mix(in srgb, var(--oas-progress-color, var(--oas-color-primary)) 35%, transparent) |
--oas-progress-color | var(--oas-color-primary) |
--oas-progress-duration | 1.2s |
--oas-progress-height | var(--oas-space-2) |
--oas-progress-inside-color | var(--oas-color-bg) |
--oas-progress-step-gap | var(--oas-space-1) |
--oas-progress-stripe-color | var(--oas-color-bg) |
--oas-progress-stripe-size | calc(var(--oas-progress-height, var(--oas-space-2)) * 2.5) |
--oas-progress-track-color | var(--oas-color-bg-hover) |
role="progressbar" + aria-valuenow / aria-valuemin / aria-valuemax (synced for both line and circle).