Progress

Progress indicators that express how long an operation will take.

# Features

Exposed to assistive technology as a progress bar using ARIA.
Labeling support for accessibility

# Anatomy

Typically, a progress bar consists of:

Progress: The element showing the full progress of an operation.

<script>
	import { createProgress } from '@grail-ui/svelte';

	const { progressAttrs, percentage, valueLabel, value } = createProgress();
</script>

<div style="--value: {$percentage * 100};" {...$progressAttrs}>{$valueLabel}</div>

# Examples

# Custom scale

By default, the value represents the current percentage of progress, as the minimum and maximum values default to 0 and 100, respectively. Alternatively, a different scale can be used by setting the minValue and maxValue.

createProgress({
	value: 100,
	minValue: 50,
	maxValue: 150,
})

# Custom value label

The default formatting for values is a percentage, for example 30%. However, you can use the formatValueLabel function to specify a different format if desired.

createProgress({
	value: 30,
	formatValueLabel({ value, maxValue }) {
		return `${value} out of ${maxValue}`;
	}
})

# API

# ProgressConfig

Property	Description	Default
minValue?	`number` The minimum allowed value.	`0`
maxValue?	`number` The maximum allowed value.	`100`
value?	`number \| null` The initial value of the progress.	`0`
formatValueLabel?	`(data: { value: number; percentage: number; minValue: number; maxValue: number }) => string` The formatter to display the value's label.	Formatted percentage

# ProgressReturn

Property	Description
value	`Writable<number \| null>` The controlled value of the progress.
percentage	`Readable<number>` The calculated percentage of the progress.
valueLabel	`Readable<string>` The content to display as the value's label (e.g. 30% or 1 of 4).
progressAttrs	`Readable<Record<string, string>>` HTML attributes for the progress bar container element.

Overview

Components

Utilities