Progress Bars

Svelte Component

An indicator showing the progress or completion of a task.

Import

Package

Source

Doc

Progress Bar

Determinate

Indeterminate

Label Height

h-1

h-2

h-4

h-8

Rounded Meter Track

This component is treated as an ARIA progressbar.

html

<ProgressBar label="Progress Bar" value={50} max={100} />

Indeterminate Mode

The value property must be removed or set to undefined.

html

<ProgressBar />