Progress

A horizontal bar that visually indicates the completion status of a task or process.

Anatomy

<script>
  import {
    Progress,
    ProgressRoot,
    ProgressTrack,
    ProgressRange,
    ProgressLabel,
    ProgressValueText,
  } from "@saas-ui/svelte/components/progress";
</script>

<Progress.Root value={50}>
  <Progress.Label>Loading...</Progress.Label>
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
  <Progress.ValueText />
</Progress.Root>

Examples

Animated Stripes Accessibility

Use the animated prop to animate the striped pattern.

<Progress.Root class="max-w-60" value={50} striped animated>
	<Progress.Track>
		<Progress.Range />
	</Progress.Track>
</Progress.Root>

Basic Accessibility

Basic progress bar with default styling.

<Progress.Root class="max-w-60" value={50}>
	<Progress.Track>
		<Progress.Range />
	</Progress.Track>
</Progress.Root>

Colours Accessibility

Use the colour prop to change the colour scheme of the progress bar.

<Stack gap={2} class="items-start">
	{#each colours as colour}
		<Group gap={10} class="items-center px-4">
			<Text class="min-w-[8ch]">{colour}</Text>
			<Progress.Root
				class="w-32"
				value={40}
				{colour}
				variant="outline"
			>
				<Progress.Track>
					<Progress.Range />
				</Progress.Track>
			</Progress.Root>
			<Progress.Root
				class="w-32"
				value={40}
				{colour}
				variant="subtle"
			>
				<Progress.Track>
					<Progress.Range />
				</Progress.Track>
			</Progress.Root>
		</Group>
	{/each}
</Stack>

Indeterminate Accessibility

Set value to null for an indeterminate progress bar.

<Progress.Root class="max-w-60" value={null}>
	<Progress.Track>
		<Progress.Range />
	</Progress.Track>
</Progress.Root>

Inline Label Accessibility

Progress bar with inline label using Progress.ValueText.

<Progress.Root class="max-w-sm" value={40}>
	<Stack direction="row" gap={5} class="items-center">
		<Progress.Label class="mb-0">Usage</Progress.Label>
		<Progress.Track class="flex-1">
			<Progress.Range />
		</Progress.Track>
		<Progress.ValueText>40%</Progress.ValueText>
	</Stack>
</Progress.Root>

Range Colours Accessibility

Use the colour prop dynamically based on value to indicate different progress ranges (e.g., red for low, green for high).

<Stack gap={4} class="max-w-60">
	<Progress.Root value={25} colour="red">
		<Progress.Track>
			<Progress.Range />
		</Progress.Track>
	</Progress.Root>
	<Progress.Root value={50} colour="amber">
		<Progress.Track>
			<Progress.Range />
		</Progress.Track>
	</Progress.Root>
	<Progress.Root value={75} colour="green">
		<Progress.Track>
			<Progress.Range />
		</Progress.Track>
	</Progress.Root>
	<Progress.Root value={100} colour="blue">
		<Progress.Track>
			<Progress.Range />
		</Progress.Track>
	</Progress.Root>
</Stack>

Shapes Accessibility

Use the shape prop to change the shape of the progress bar.

<Stack gap={4} class="max-w-60">
	{#each progressShapes as shape}
		<Stack gap={1}>
			<Text size="xs" class="text-fg-muted">{shape}</Text>
			<Progress.Root {shape} value={50}>
				<Progress.Track>
					<Progress.Range />
				</Progress.Track>
			</Progress.Root>
		</Stack>
	{/each}
</Stack>

Sizes Accessibility

Use the size prop to change the size of the progress bar.

<Stack gap={4} class="max-w-60">
	{#each progressSizes as size}
		<Stack gap={1}>
			<Text size="xs" class="text-fg-muted">{size}</Text>
			<Progress.Root {size} value={50}>
				<Progress.Track>
					<Progress.Range />
				</Progress.Track>
			</Progress.Root>
		</Stack>
	{/each}
</Stack>

Stripes Accessibility

Use the striped prop to add a striped pattern to the progress bar.

<Progress.Root class="max-w-60" value={50} striped>
	<Progress.Track>
		<Progress.Range />
	</Progress.Track>
</Progress.Root>

Values Accessibility

Use the value prop to set the progress percentage.

<Stack gap={4} class="max-w-60">
	{#each [0, 25, 50, 75, 100] as value}
		<Stack gap={1}>
			<Text size="xs" class="text-fg-muted">{value}%</Text>
			<Progress.Root {value}>
				<Progress.Track>
					<Progress.Range />
				</Progress.Track>
			</Progress.Root>
		</Stack>
	{/each}
</Stack>

Variants Accessibility

Use the variant prop to change the visual style of the progress bar.

<Stack gap={4} class="max-w-52">
	{#each progressVariants as variant}
		<Stack gap={1}>
			<Text size="xs" class="text-fg-muted">{variant}</Text>
			<Progress.Root {variant} value={50}>
				<Progress.Track>
					<Progress.Range />
				</Progress.Track>
			</Progress.Root>
		</Stack>
	{/each}
</Stack>

With Info Tip Accessibility

Progress bar with info tooltip on label.

<Progress.Root class="max-w-60" value={50}>
	<Progress.Label class="mb-2" info="Uploading document to the server">
		Uploading
	</Progress.Label>
	<Progress.Track>
		<Progress.Range />
	</Progress.Track>
</Progress.Root>

With Label Accessibility

Use Progress.Label to add a label to the progress bar.

<Progress.Root class="max-w-60" value={50}>
	<Progress.Label class="mb-2">Uploading</Progress.Label>
	<Progress.Track>
		<Progress.Range />
	</Progress.Track>
</Progress.Root>

Props

Prop	Type	Default	Description
`value`	`[object Object]`	`50`	The current value of the progress (0-100). Set to null for indeterminate.
`min`	`number`	`0`	The minimum value.
`max`	`number`	`100`	The maximum value.
`size`	`xs \| sm \| md \| lg \| xl`	`md`	The size of the component.
`variant`	`outline \| subtle`	`outline`	The visual style of the component.
`shape`	`square \| rounded \| full`	`rounded`	The shape of the progress bar.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	`accent`	The colour theme of the component.
`striped`	`boolean`	`false`	Whether to show stripes on the progress bar.
`animated`	`boolean`	`false`	Whether to animate the stripes.
`class`	`text`	-	Additional CSS classes to apply.
`children`	`any`	-	The content to be rendered inside the component.