Progress
Progress bar showing the current progress of an operation or task.
Basic Usage
Set percentage with the percent prop.
25%
50%
75%
100%
vue
<AProgress :percent="25" />
<AProgress :percent="50" />
<AProgress :percent="75" />
<AProgress :percent="100" />Size
Support sm, md, lg sizes.
60%
60%
60%
vue
<AProgress :percent="60" size="sm" />
<AProgress :percent="60" size="md" />
<AProgress :percent="60" size="lg" />Status
active shows a flowing shimmer effect, exception shows red. Auto-switches to success at 100%.
60%
60%
100%
vue
<AProgress :percent="60" status="active" />
<AProgress :percent="60" status="exception" />
<AProgress :percent="100" />Custom Colors
Customize fill and trail colors with strokeColor and trailColor.
70%
40%
vue
<AProgress :percent="70" strokeColor="#a78bfa" />
<AProgress :percent="40" strokeColor="#f97316" trailColor="#fff7ed" />Hide Percentage
Set show-info="false" to hide the percentage text.
vue
<AProgress :percent="80" :show-info="false" />API
Props
| Name | Type | Default | Description |
|---|---|---|---|
percent | number | 0 | Percentage, range 0–100 |
strokeColor | string | — | Fill color, defaults to accent |
trailColor | string | — | Trail color |
size | 'sm' | 'md' | 'lg' | 'md' | Size |
showInfo | boolean | true | Show percentage text |
status | 'active' | 'exception' | 'success' | 'active' | Status |
Interaction
- Width transition uses smooth easing curve
- Auto-switches to success color at 100%
- Active status shows flowing shimmer effect
- Full ARIA progressbar semantics
- Respects
prefers-reduced-motion