Badgealternative
Use Badge for status without percentageProgress
Visual indicator of task completion or loading state. Available in linear and circular variants.
Setup
import { Progress } from '@fragments-sdk/ui';Examples
Default
Basic progress bar with percentage
Loading preview...
Variants
Different color variants for different states
Loading preview...
Sizes
Different progress bar sizes
Loading preview...
Indeterminate
Loading state with unknown duration
Loading preview...
Circular
Circular progress indicator
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | Current progress value (0-100). Null for indeterminate. |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
size | enumsmmdlg | md | Size of the progress bar |
variant | enumdefaultsuccesswarningdanger | default | Color variant |
label | string | Not set | Label text above the progress bar |
showValue | boolean | false | Show percentage value |
formatValue | function | Not set | Custom formatter for displayed progress value |
Usage Guidelines
When to use
- Showing upload/download progress
- Displaying task completion percentage
- Form completion indicators
- Loading states with known duration
When not to use
- Unknown loading duration (use Spinner)
- Step-based progress (use Stepper)
- Status without percentage (use Badge)
Best practices
- Use determinate progress when you know the completion percentage
- Use indeterminate for unknown durations
- Include a label for context when the purpose isnt obvious
- Use appropriate color variants for success/warning/danger states
- Determinate values are clamped to the min/max range for display
Accessibility
- Uses role="progressbar" with aria-valuenow
- Label is associated with the progress bar
- State changes are announced to screen readers