Progress — Loidolt Theme

import { Progress } from '@loidolt/theme-svelte';

Example

Notes

value={undefined} is the indeterminate mode: no aria-valuenow, animated bar.
formatValue feeds both the visible showValue text and aria-valuetext, so "9 of 12 sheets" is heard instead of 75%.
variant colours the bar by outcome; size sets its thickness.

Props

Generated from the component source, so it cannot drift from the implementation.

Progress props
Prop	Type	Default	Notes
`class`	`string`	`—`	Lands on the progressbar element.
`formatValue`	`(value: number, max: number) => string`	`—`	Text for the value, shown by `showValue` and spoken as `aria-valuetext` — "3 of 12 sheets" says more than 25%. Defaults to a whole percentage.
`label`	`string`	`'Progress'`
`max`	`number`	`100`
`ref` bindable	`HTMLDivElement \| null`	`null`
`showValue`	`boolean`	`false`	Show the formatted value after the bar.
`size`	`ControlSize`	`'md'`	Bar thickness.
`value`	`number`	`—`	Omit (or pass `undefined`) for an indeterminate bar.
`variant`	`'default' \| StatusVariant`	`'default'`	Colours the bar by outcome — `success` when done, `error` when a run failed part-way.

Plus the attributes of HTMLAttributes<HTMLDivElement>, forwarded to the root element.