Progress

Displays the status of a task that takes a long time.

Export data

<script lang="ts">
	import { Progress } from '@sveltery/base/progress';

	let value = $state(20);

	// Simulate changes
	$effect(() => {
		const interval = setInterval(() => {
			value = Math.min(100, Math.round(value + Math.random() * 25));
		}, 1000);
		return () => clearInterval(interval);
	});
</script>

<Progress.Root class="grid w-60 max-w-full grid-cols-2 gap-y-2" {value}>
	<Progress.Label class="text-sm font-normal text-neutral-950 dark:text-white">
		Export data
	</Progress.Label>
	<Progress.Value class="text-right text-sm text-neutral-950 dark:text-white" />
	<Progress.Track class="col-span-2 h-1 overflow-hidden bg-neutral-200 dark:bg-neutral-800">
		<Progress.Indicator class="bg-neutral-950 transition-[width] duration-500 dark:bg-white" />
	</Progress.Track>
</Progress.Root>

Anatomy

Import the component and assemble its parts:

Anatomy

<script lang="ts">
	import { Progress } from '@sveltery/base/progress';
</script>

<Progress.Root>
	<Progress.Label />
	<Progress.Track>
		<Progress.Indicator />
	</Progress.Track>
	<Progress.Value />
</Progress.Root>

API reference

Root

Groups all parts of the progress bar and provides the task completion status to screen readers. Renders a <div> element.

value^* number | null —

Name: value
Description: The current value. The component is indeterminate when value is null or any non-finite number.
Type: number | null

max number 100

Name: max
Description: The maximum value.
Type: number
Default: 100

min number 0

Name: min
Description: The minimum value.
Type: number
Default: 0

format Intl.NumberFormatOptions —

Name: format
Description: Options to format the value.
Type: Intl.NumberFormatOptions

locale Intl.LocalesArgument —

Name: locale
Description: The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale.
Type: Intl.LocalesArgument

getAriaValueText function —

Name: getAriaValueText
Description: Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
Type: (formattedValue: string, value: number | null) => string

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ProgressState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ProgressState, children: Snippet | undefined]>

data-complete

Present when the progress has completed.

data-indeterminate

Present when the progress is in indeterminate state.

data-progressing

Present while the progress is progressing.

Attribute	Description	-
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Track

Contains the progress bar indicator. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ProgressState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ProgressState, children: Snippet | undefined]>

data-complete

Present when the progress has completed.

data-indeterminate

Present when the progress is in indeterminate state.

data-progressing

Present while the progress is progressing.

Attribute	Description	-
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Indicator

Visualizes the completion status of the task. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ProgressState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ProgressState, children: Snippet | undefined]>

data-complete

Present when the progress has completed.

data-indeterminate

Present when the progress is in indeterminate state.

data-progressing

Present while the progress is progressing.

Attribute	Description	-
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Value

A text element displaying the current value. Renders a <span> element.

children Snippet<[formattedValue: string | null, value: number | null]> —

Name: children
Description: Custom value text. Receives the formatted value ('indeterminate' while indeterminate) and the raw value.
Type: Snippet<[formattedValue: string | null, value: number | null]>

render Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: ProgressState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <span>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: ProgressState, children: Snippet | undefined]>

data-complete

Present when the progress has completed.

data-indeterminate

Present when the progress is in indeterminate state.

data-progressing

Present while the progress is progressing.

Attribute	Description	-
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Label

An accessible label for the progress bar. Renders a <span> element.

render Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: ProgressState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <span>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: ProgressState, children: Snippet | undefined]>

data-complete

Present when the progress has completed.

data-indeterminate

Present when the progress is in indeterminate state.

data-progressing

Present while the progress is progressing.

Attribute	Description	-
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.