Progress Bars

Svelte Component

An indicator showing the progress or completion of a task.

Import

Package

Source

Doc

Usage

Props

Determinate

Indeterminate

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

Remoe the value property or set to undefined.

html

<ProgressBar />

html

<ProgressBar value={undefined} />

The native progress element works cross browser, but does not currently support Indeterminate mode when styled.

html

<progress value={50} max={100} />