Documentation
Asgard
Getting started
Theming
Guides
Inputs & forms
Pickers
Data display
Layout & docking
Feedback & overlays
Navigation & chrome
Data display
Show that work is happening.
Linear and circular progress indicators for visualizing task completion or ongoing activity.
Key features:
LinearProgress(horizontal bar) andCircularProgress(ring)- Determinate values and indeterminate animation modes
- Optional labels and custom
gradientfills - Multiple semantic color types and three sizes
Loading preview…
When to use it
- File uploads and downloads
- Multi-step or long-running jobs
- Inline loading spinners
- Determinate vs indeterminate progress
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current progress value between min and max. Ignored when indeterminate is true. |
min | number | 0 | Minimum value of the progress range. |
max | number | 100 | Maximum value of the progress range. |
size | 'small' | 'normal' | 'large' | — | Controls the thickness of the progress bar or diameter of the circular indicator. |
type | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | — | Semantic color type applied to the progress fill. |
indeterminate | boolean | — | When true, displays an animated progress indicator without a specific value, useful for unknown-duration tasks. |
showLabel | boolean | — | Shows a percentage label on or near the progress indicator. |
gradient | { from: string; to: string } | — | Applies a gradient fill to the progress bar from the specified start and end colors. |
Notes
- CircularProgress supports the same core props as LinearProgress including value, type, size, and indeterminate.
- Indeterminate mode shows a continuously animated bar or spinner with no specific value, ideal for operations with unknown duration.
Presets