@duskmoon-dev/el-progress

A progress bar component with various styles built with Web Components.

Installation

bun add @duskmoon-dev/el-progress

Usage

Auto-Register

import '@duskmoon-dev/el-progress/register';

<el-dm-progress value="50"></el-dm-progress>

Manual Registration

import { ElDmProgress, register } from '@duskmoon-dev/el-progress';

// Register with default tag name
register();

// Or register with custom tag name
customElements.define('my-progress', ElDmProgress);

Sizes

Size	Description
`sm`	Small/thin progress bar
`md`	Medium progress bar (default)
`lg`	Large/thick progress bar

Attributes

Attribute	Type	Default	Description
`value`	`number`	`0`	Current value
`max`	`number`	`100`	Maximum value
`color`	`string`	`'primary'`	Color variant
`size`	`string`	`'md'`	Size: `sm`, `md`, `lg`
`indeterminate`	`boolean`	`false`	Show indeterminate state
`striped`	`boolean`	`false`	Show striped pattern
`animated`	`boolean`	`false`	Animate the stripes
`show-value`	`boolean`	`false`	Show value text

CSS Parts

Part	Description
`progress`	The progress container
`bar`	The progress bar fill
`value`	The value text

Examples

Basic

<el-dm-progress value="50"></el-dm-progress>

With Value Display

<el-dm-progress value="75" show-value></el-dm-progress>

Colors

<el-dm-progress value="50" color="primary"></el-dm-progress>
<el-dm-progress value="50" color="success"></el-dm-progress>
<el-dm-progress value="50" color="warning"></el-dm-progress>
<el-dm-progress value="50" 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="50" striped></el-dm-progress>

Animated Stripes

<el-dm-progress value="50" striped animated></el-dm-progress>

Dynamic Update

const progress = document.querySelector('el-dm-progress');
let value = 0;
const interval = setInterval(() => {
  value += 10;
  progress.value = value;
  if (value >= 100) clearInterval(interval);
}, 500);

License

MIT