Components

Progress

Shows how far along a task is, or that it is busy, as a bar or a circle.

Usage

Give value from 0 to 100, or indeterminate when the length of the wait is unknown. The bar fills by scaling, so it stays smooth; the circle can hold a label in its centre.

25%

62%

100%

Upload.svelte

<script>
  import { ProgressCircular, ProgressLinear } from 'sveltier';
</script>

<ProgressLinear value={uploaded} label="Uploading statement" />
<ProgressCircular value={62} size="lg">62%</ProgressCircular>
<ProgressCircular indeterminate label="Loading accounts" />

Accessibility

Both are a progressbar with aria-valuenow, which is left out while indeterminate.
Name each one for what it measures with label; without it, they are called "Progress" or, while indeterminate, "Loading".
With reduced motion, a busy bar pulses in place instead of crossing, and a busy circle turns slowly rather than stopping, so the page does not look frozen.

API

Name	Type	Default	Description
`color`	`Color`	`'primary'`	The colour of the bar; its track is a tint of it.
`value`	`number`	`–`	How far along, from 0 to 100. Values outside are clamped.
`indeterminate`	`boolean`	`false`	Busy for an unknown time: no value, and moving.
`label`	`string`	`–`	The name screen readers give the bar, such as `Uploading statement`. Defaults to the locale's `loading` when indeterminate and `progress` otherwise.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLDivElement \| null`	`–`	The root element, bindable with `bind:ref`.

Name	Type	Default	Description
`color`	`Color`	`'primary'`	The colour of the arc; its track is a tint of it.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	The diameter: the control height of the size.
`value`	`number`	`–`	How far along, from 0 to 100. Values outside are clamped.
`indeterminate`	`boolean`	`false`	Busy for an unknown time: no value, and moving.
`label`	`string`	`–`	The name screen readers give the bar, such as `Uploading statement`. Defaults to the locale's `loading` when indeterminate and `progress` otherwise.
`children`	`Snippet`	`–`	Content in the centre, such as the percentage.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLDivElement \| null`	`–`	The root element, bindable with `bind:ref`.