Progress ported
Show how much of a known task is complete.
Show how much of a known task is complete.
Loading demo…
Guidance
When to use
- Determinate progress for uploads, imports, or long tasks.
- Progress with a visible percentage and a check at completion, via showValue.
When not to use
- Use skeleton while content is loading with no progress to report.
- Use usage-meter for quota against a limit, and gauge for dashboard metrics.
- Use stepper to show position in a multi-step flow.
pnpm dlx shadcn-svelte@latest add @arcui/progressUsage
<script lang="ts">
import { Progress } from '$lib/components/progress';
</script>
<Progress label="Uploading report.pdf" value={sent} max={size} showValue />Variants & Examples
With percentage
showValue counts the clamped percentage and mounts a check at 100%.
<Progress label="Uploading report.pdf" value={sent} max={size} showValue />Label only
Without showValue the track still reports aria-valuenow. The fill turns success at 100%.
<Progress label="Indexing" value={25} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current value, clamped between 0 and max. |
max | number | 100 | Value that counts as complete. |
label | string | – | Visible label and aria-label. Falls back to \"Progress\" for assistive tech. |
showValue | boolean | false | Shows the counted percentage and a check at 100%. |
...props | Omit<HTMLAttributes<HTMLDivElement>, "children"> | – | Forwarded to the progressbar element, such as className. |
Keyboard Interactions
| Key | Action |
|---|---|
None | The progressbar reports a value. It does not take keyboard input. |
Accessibility
- Renders role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow, and a percentage aria-valuetext.
- Phase 1 shows a single label. Phase 2 crossfades label changes and marks the outgoing copy aria-hidden.
- It is not a live region; announce completion separately if it matters.
- The check icon is aria-hidden.
Motion
Phase 1 jumps the fill with translateX to the clamped percentage and shows the check only at 100% when showValue is set. The success colour is the verbatim data-complete rule. Phase 2 shares one spring across the fill and the counted number, crossfades the label, and springs the check in. Reduced motion is the Phase 1 jump.
Notes for AI
- Use for determinate task progress. Use skeleton while content has no progress to report, gauge or activity-rings for dashboard metrics, and usage-meter for quota against a limit.
- Pass raw value and max; the percentage is computed and clamped for you.
Source of truth: registry/components/progress/progress.tsx