ProgressBar

ProgressBar shows the completion progress of a task, either as a determinate bar showing exact progress, or an indeterminate animation for tasks with unknown duration.

Import

import { ProgressBar } from '@proyecto-viviana/solid-spectrum';

Basic Progress

A simple progress bar with a label and percentage value. Click the button to simulate a file upload.

Uploading files...

const [progress, setProgress] = createSignal(0);

<ProgressBar label="Uploading..." value={progress()} />
<Button onPress={simulateUpload}>Start Upload</Button>

Sizes

Progress bars are available in S2 sizes from S through XL.

Small

40%

Medium

60%

Large

75%

Extra Large

90%

<ProgressBar label="Small" value={40} size="S" />
<ProgressBar label="Medium" value={60} size="M" />
<ProgressBar label="Large" value={75} size="L" />
<ProgressBar label="Extra Large" value={90} size="XL" />

Label Position

Place the label/value row above the bar or inline beside it.

Top label

60%

Side label

60%

<ProgressBar label="Top label" value={60} labelPosition="top" />
<ProgressBar label="Side label" value={60} labelPosition="side" />

Indeterminate

When the progress amount is unknown, use indeterminate mode to show an animated indicator.

Loading data...

Processing...

<ProgressBar label="Loading data..." isIndeterminate />
<ProgressBar label="Processing..." isIndeterminate size="L" />

Custom Value Label

Customize how the value is displayed using a custom value label.

Storage

750 MB of 1 GB

Disk usage

9 / 10 TB

<ProgressBar label="Storage" value={75} valueLabel="750 MB of 1 GB" />
<ProgressBar label="Disk usage" value={90} valueLabel="9 / 10 TB" />

Custom Range

Set custom minimum and maximum values for the progress range.

Temperature

72 F

Volume

7 / 11

<ProgressBar label="Temperature" value={72} minValue={32} maxValue={212} valueLabel="72 F" />
<ProgressBar label="Volume" value={7} minValue={0} maxValue={11} valueLabel="7 / 11" />

Static Color

Use static color when the progress bar appears on a colored background.

On dark

56%

On light

56%

<ProgressBar label="On dark" value={56} staticColor="white" />
<ProgressBar label="On light" value={56} staticColor="black" />

Props

Prop	Type	Default	Description
`value`	number	—	Current progress value
`label`	string	—	Text label displayed above the bar
`size`	'S' \| 'M' \| 'L' \| 'XL'	`'M'`	Size of the progress bar
`isIndeterminate`	boolean	`false`	Show an indeterminate animation for unknown progress
`minValue`	number	`0`	Minimum value of the progress range
`maxValue`	number	`100`	Maximum value of the progress range
`valueLabel`	string	—	Custom text to display as the value (overrides percentage)
`labelPosition`	'top' \| 'side'	`'top'`	Position of the label and value relative to the bar
`staticColor`	'white' \| 'black' \| 'auto'	—	Static color branch for use on colored backgrounds
`formatOptions`	Intl.NumberFormatOptions	—	Options used to format the generated value label
`aria-label`	string	—	Accessible label (alternative to visible label)
`styles`	StyleString	—	S2 style macro overrides for supported layout properties
`UNSAFE_className`	string	—	Escape hatch class name
`UNSAFE_style`	JSX.CSSProperties	—	Escape hatch inline styles

Accessibility

Uses role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax
Label is linked via aria-labelledby for screen readers
Indeterminate state omits aria-valuenow per ARIA spec
Custom value labels are announced to screen readers
Value changes are announced as the progress updates
High contrast mode support for visibility in all themes