@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