Progress

role="progressbar" with aria-value.*

Pass value=null for an indeterminate bar (announced as busy, animated fill).

Feedback

<script lang="ts">
	import { Progress } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
value	number | null	0	null is indeterminate — an unknown duration, not zero progress.
max	number	100	The value that counts as complete.
class	string	—	Merged with the component's own classes, last — so yours win.
aria-label	string	—	Names the bar, e.g. "Scan progress".
aria-labelledby	string	—	Id of the element that names this, instead of aria-label.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Progress value={62} aria-label="Scan progress" />
<Progress value={null} aria-label="Working" />

Feedback · Badge · Alert · Spinner · Skeleton · Toaster · Avatar · Image

---

← All components · Getting started · Theming · source