Display

Progress

A horizontal progress bar for showing completion percentage or indeterminate loading.

LlmProgress

Demo

25% — Default

60% — Success

85% — Warning

Indeterminate

<LlmProgress value={25} />
<LlmProgress value={60} variant="success" />
<LlmProgress value={85} variant="warning" />
<LlmProgress indeterminate={true} />

API

Prop	Type	Default	Description
`value`	`number`	`0`	Progress value from 0 to 100
`max`	`number`	`100`	Maximum value
`indeterminate`	`boolean`	`false`	Shows animated indeterminate state
`variant`	`'default' \| 'success' \| 'warning' \| 'danger'`	`'default'`	Color variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the progress bar

Import

import { LlmProgress } from '@atelier-ui/react';