Feedback

Progress

Shows how far along a task is.

Installation

npx sinaui add progress

Copy src/lib/ui/Progress.svelte and tokens.css. No dependencies.

Examples

Basic

Transcription

<script lang="ts">
	import Progress from '#lib/ui/Progress.svelte';
</script>

<Progress label="Transcription" value={42} />

Custom value text

format sets what is shown and what screen readers hear.

Folios copied

<script lang="ts">
	import Button from '#lib/ui/Button.svelte';
	import Progress from '#lib/ui/Progress.svelte';

	let folios = $state(12);
</script>

<Progress
	label="Folios copied"
	value={folios}
	max={40}
	format={(v, max) => `${v} of ${max} folios`}
/>
<Button size="sm" variant="secondary" onclick={() => (folios = Math.min(40, folios + 7))}>
	Copy seven more
</Button>

Indeterminate

Searching the Córdoba catalog

<script lang="ts">
	import Progress from '#lib/ui/Progress.svelte';
</script>

<!-- No value: the amount of work is unknown, so it sweeps instead of filling. -->
<Progress label="Searching the Córdoba catalog" />

As a ring

shape=circle: the value sits in the middle and the label under it.

Pages copied

<script lang="ts">
	import Progress from '#lib/ui/Progress.svelte';
</script>

<Progress shape="circle" label="Pages copied" value={164} max={214} />

Ring, indeterminate

With no value, an arc turns.

Binding

<script lang="ts">
	import Progress from '#lib/ui/Progress.svelte';
</script>

<!-- No value: an arc turns until the work is done. -->
<Progress shape="circle" label="Binding" size={48} showValue={false} />

Props

Prop	Type	Default
`label`	`string` (required)
`value`	`number`: unset = indeterminate
`max`	`number`	`100`
`format`	`(value, max) => string`	percent
`showValue`	`boolean`	`true`
`shape`	`'bar' \| 'circle'`	`'bar'`
`size`	`number`, the ring's diameter in px	`72`

Accessibility

role="progressbar" labeled by its label, with aria-valuenow and a formatted aria-valuetext.
Numbers go through Intl.NumberFormat.
Fills with transform only; the indeterminate sweep becomes a gentle pulse with reduced motion.