Progress
Progress bars, circular indicators, and skeleton loaders for communicating loading state, completion percentage, and content placeholders.
Live Preview
Interact with the controls below to explore ProgressBar options in real time.
Animated Demo
Auto-incrementing progress that resets at 100%, demonstrating smooth animation transitions.
Installation
Install the component library via your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the components you need from the package.
import { ProgressBar, CircularProgress, Skeleton } from '@/components/aidash/progress';Progress Bar - Basic
A simple determinate progress bar showing completion percentage.
<ProgressBar value={30} />
<ProgressBar value={60} />
<ProgressBar value={90} />Progress Bar - Sizes
Three sizes available: sm (thin), md (default), and lg (thick).
<ProgressBar value={50} size="sm" />
<ProgressBar value={50} size="md" />
<ProgressBar value={50} size="lg" />Progress Bar - Colors
Five color themes to match different semantic meanings.
<ProgressBar value={65} color="primary" />
<ProgressBar value={65} color="accent" />
<ProgressBar value={65} color="success" />
<ProgressBar value={65} color="warning" />
<ProgressBar value={65} color="error" />Progress Bar - Labels
Show a percentage label with showLabel or provide a custom text label.
<ProgressBar value={42} showLabel />
<ProgressBar value={78} showLabel label="Uploading files..." color="success" />
<ProgressBar value={15} showLabel label="Compiling..." color="warning" />Progress Bar - Striped
Apply a diagonal stripe pattern to the progress bar fill for visual emphasis.
<ProgressBar value={55} striped color="primary" size="lg" />
<ProgressBar value={70} striped color="success" size="lg" />
<ProgressBar value={40} striped color="warning" size="lg" />Progress Bar - Indeterminate
An indeterminate variant for when the total progress is unknown.
<ProgressBar variant="indeterminate" color="primary" />
<ProgressBar variant="indeterminate" color="accent" />
<ProgressBar variant="indeterminate" color="error" />Circular Progress
Circular progress indicators in various sizes with optional center labels.
<CircularProgress value={25} size={36} strokeWidth={3} showLabel />
<CircularProgress value={50} size={48} strokeWidth={4} showLabel />
<CircularProgress value={75} size={64} strokeWidth={5} showLabel />
<CircularProgress value={100} size={80} strokeWidth={6} showLabel />Circular Progress - Colors
All five color themes applied to circular progress.
<CircularProgress value={65} color="primary" showLabel />
<CircularProgress value={65} color="accent" showLabel />
<CircularProgress value={65} color="success" showLabel />
<CircularProgress value={65} color="warning" showLabel />
<CircularProgress value={65} color="error" showLabel />Circular Progress - Indeterminate
Spinning circular indicators for unknown-duration loading states.
<CircularProgress variant="indeterminate" size={32} strokeWidth={3} color="primary" />
<CircularProgress variant="indeterminate" size={48} strokeWidth={4} color="accent" />
<CircularProgress variant="indeterminate" size={64} strokeWidth={5} color="success" />Skeleton
Placeholder shapes that pulse while content is loading. Available in text, circle, and rectangle shapes.
<Skeleton shape="text" width={200} />
<Skeleton shape="circle" width={48} />
<Skeleton shape="rectangle" width={160} height={80} />Skeleton - Multi-line
Generate multiple skeleton lines to represent loading paragraphs. The last line is automatically shorter.
<div className="flex items-start gap-4">
<Skeleton shape="circle" width={40} />
<div className="flex-1">
<Skeleton shape="text" lines={3} />
</div>
</div>Accessibility
Built-in accessibility features following WAI-ARIA progressbar patterns.
role="progressbar" is applied to the track element for screen reader identification.
aria-valuenow reflects the current value for determinate progress bars.
aria-valuemin and aria-valuemax define the range (0 to max).
Indeterminate mode omits aria-valuenow to signal an unknown completion state.
API Reference
Complete prop documentation for all three progress components.
ProgressBarProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Current progress value |
| max | number | 100 | Maximum progress value |
| size | 'sm' | 'md' | 'lg' | 'md' | Height of the progress bar |
| color | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'primary' | Color theme of the bar fill |
| variant | 'determinate' | 'indeterminate' | 'determinate' | Whether to show measured or infinite progress |
| showLabel | boolean | false | Display percentage label above the bar |
| label | string | — | Custom text label above the bar |
| animated | boolean | true | Animate width transitions |
| striped | boolean | false | Apply diagonal stripe pattern to the fill |
| className | string | '' | Additional CSS classes |
CircularProgressProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Current progress value |
| max | number | 100 | Maximum progress value |
| size | number | 48 | Width and height in pixels |
| strokeWidth | number | 4 | Thickness of the circular stroke |
| color | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'primary' | Stroke color theme |
| variant | 'determinate' | 'indeterminate' | 'determinate' | Whether to show measured or spinning progress |
| showLabel | boolean | false | Display percentage in the center |
| className | string | '' | Additional CSS classes |
SkeletonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | 'text' | 'circle' | 'rectangle' | 'text' | Shape of the skeleton placeholder |
| width | string | number | — | Width of the skeleton |
| height | string | number | — | Height of the skeleton |
| lines | number | 1 | Number of text lines (text shape only) |
| className | string | '' | Additional CSS classes |
| animated | boolean | true | Enable pulse animation |
Related
Components that work well alongside progress indicators.