Skip to content
Display

Progress

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

LlmProgress
WCAG AA0 deps

Demo

Live PreviewReact

25%

60% — Success

85% — Warning

Indeterminate

jsx
<LlmProgress value={25} label="Upload progress" />
<LlmProgress value={60} variant="success" label="Form completion" />
<LlmProgress value={85} variant="warning" label="Quota usage" />
<LlmProgress indeterminate label="Loading…" />

API (Angular)

PropTypeDefaultDescription
valuenumber0Progress value from 0 to 100
maxnumber100Maximum value
indeterminatebooleanfalseShows animated indeterminate state
variant'default' | 'success' | 'warning' | 'danger''default'Color variant
size'sm' | 'md' | 'lg''md'Size of the progress bar
labelstringAccessible name (aria-label). Required by ARIA when no visible label is nearby.

Import

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