Svelte Component

Progress Bars

An indicator showing the progress or completion of a task.

typescript
import { ProgressBar } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

Indeterminate Mode

Remove the value property or set value to undefined.

Custom Animation

Use the animIndeterminate prop to pass a custom CSS animation for the progress bar meter.

Native Alternative

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


Accessibility

This component is treated as an ARIA progressbar.