Progress
A determinate progress meter: a linear bar or a circular ring, across six semantic tones.
Live demo
Progress shows how far along a task is. The variant axis picks the shape (a horizontal linear bar or a circular svg ring) and the tone axis picks the semantic color, so any of the six tones (accent, neutral, danger, success, warn, info) can paint either shape.
A determinate meter fills to value between min and max; an indeterminate mode animates a moving sweep when the amount of work is unknown. It exposes role="progressbar" with aria-valuenow/aria-valuemin/aria-valuemax for screen readers, and an optional inline percentage readout.
When to use
How this component composes with the rest of the set.
show-value alone is not enough. value from an upload/download stream; flip to indeterminate for the indefinite handshake phase. success tone on completion and danger on a stalled or failed transfer to reinforce state with color. Props
9 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
Variants
linear
A horizontal bar that fills left-to-right.
circular
An SVG ring whose stroked arc sweeps clockwise from the top.
Sizes
sm
Thin bar / small ring.
md
Default.
States
indeterminate
Work of unknown duration; the indicator animates a continuous sweep.
focus-visible
Keyboard focus: a token-colored ring, plus a transparent outline that becomes real in forced-colors mode.
Anatomy
The named parts that make up the component, with their selectors.
progress
The root element carrying the variant, tone, and size classes and the progressbar role.
track
The unfilled groove (a bar rail or an SVG ring) the indicator runs along.
indicator
The filled portion, colored by tone: a bar segment or a stroked arc.
value
The optional inline percentage readout shown when show-value is set.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xoji-default register
(derive(xojiDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent
--accent-2
--accent-3
--accent-4
--bg-0
--black
--blue
--border-normal
--border-thick
--brown
--cyan
--danger
--duration-base
--ease-emphasized
--ease-standard
--fg-0
--fg-1
--fg-2
--font-sans
--gray
--green
--info
--neutral
--neutral-bg
--orange
--pink
--purple
--radius-full
--radius-sm
--red
--ring
--space-1
--space-2
--space-3
--space-6
--space-8
--success
--text-body
--text-sm
--text-xs
--warn
--white
--yellow
Slots
Optional custom content rendered in place of the built-in value readout (e.g. a label).
Accessibility
role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow so assistive tech announces the current amount. indeterminate drops aria-valuenow (the value is unknown) while keeping the min/max bounds. aria-label; the binding warns at runtime when one is missing. Code
Linear and circular
Both shapes carry any tone; add show-value for a readout or indeterminate for unknown work.
<xoji-progress value="42" aria-label="Upload progress"></xoji-progress>
<xoji-progress value="80" tone="success" show-value aria-label="Storage used"></xoji-progress>
<xoji-progress variant="circular" value="65" tone="info" show-value aria-label="Sync"></xoji-progress>
<xoji-progress variant="circular" indeterminate aria-label="Loading"></xoji-progress><script lang="ts">
import { Progress } from "@xoji/svelte";
let value = $state(42);
</script>
<Progress {value} ariaLabel="Upload progress" />
<Progress value={80} tone="success" showValue ariaLabel="Storage used" />
<Progress variant="circular" value={65} tone="info" showValue ariaLabel="Sync" />
<Progress variant="circular" indeterminate ariaLabel="Loading" />---
import { Progress } from "@xoji/astro";
---
<Progress value={42} aria-label="Upload progress" />
<Progress value={80} tone="success" showValue aria-label="Storage used" />
<Progress variant="circular" value={65} tone="info" showValue aria-label="Sync" />
<Progress variant="circular" indeterminate aria-label="Loading" />