Progress
The Progress component displays a progress bar to show completion status of a task.
Installation
npm install @duskmoon-dev/el-progress
Usage
import '@duskmoon-dev/el-progress/register';
<el-dm-progress value="50"></el-dm-progress>
Live Demo
Properties
| Property | Type | Default | Description |
|---|
value | number | 0 | Current progress (0-100) |
max | number | 100 | Maximum value |
color | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info' | 'primary' | Progress bar color |
size | 'sm' | 'md' | 'lg' | 'md' | Progress bar height |
indeterminate | boolean | false | Show indeterminate animation |
striped | boolean | false | Show striped pattern |
animated | boolean | false | Animate the stripes |
show-value | boolean | false | Display the percentage |
Colors
<el-dm-progress value="60" color="primary"></el-dm-progress>
<el-dm-progress value="60" color="success"></el-dm-progress>
<el-dm-progress value="60" color="warning"></el-dm-progress>
<el-dm-progress value="60" color="error"></el-dm-progress>
Sizes
<el-dm-progress value="50" size="sm"></el-dm-progress>
<el-dm-progress value="50" size="md"></el-dm-progress>
<el-dm-progress value="50" size="lg"></el-dm-progress>
Indeterminate
<el-dm-progress indeterminate></el-dm-progress>
Striped
<el-dm-progress value="70" striped></el-dm-progress>
<el-dm-progress value="70" striped animated></el-dm-progress>
With Value Label
<el-dm-progress value="35" size="lg" show-value></el-dm-progress>
CSS Parts
| Part | Description |
|---|
progress | The progress container |
bar | The progress bar |
value | The value label |
Accessibility
- Uses
role="progressbar" with proper ARIA attributes
aria-valuenow, aria-valuemin, and aria-valuemax are set- Indeterminate state is properly announced