Progress Bar

An indicator showing the progress or completion of a task.

javascript

import { ProgressBar } from '@brainandbones/skeleton';

Progress Bar

Determinate

Indeterminate

Label Height

h-1

h-2

h-4

h-8

Rounded Meter Track

Usage

html

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

The value property must be removed or set to undefined.

html

<ProgressBar />

Prop	Type	Default	Description
label	string	-	Set the label text.
value	number	-	Specifies the amount completed. Indeterminate when `undefined`.
max	number	100	Maximum amount the bar represents.
height	string	h-2	Provide classes to set track height.
rounded	string	rounded-full	Provide classes to set rounded styles.
meter	string	bg-accent-500	Provide arbitrary classes to style the meter element.
track	string	bg-surface-300 dark:bg-surface-700	Provide arbitrary classes to style the track element.

This component is treated as a ARIA progressbar.