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

Progress Values

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

Progress 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

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

Indeterminate Progress

<el-dm-progress indeterminate></el-dm-progress>

Striped

Striped Progress

<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