Radial Progress

Determinate circular percentage progress using the public DuskMoon Core 1.19.9 CSS contract.

Installation

npm install @duskmoon-dev/el-radial-progress

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

Live Demo

<el-dm-radial-progress value="68" aria-label="Upload progress">68%</el-dm-radial-progress>

Properties

| Property | Type | Default | Description | | –––– | ———–– | ———– | ———————————– | —– | —— | ——— | | value | number | 0 | Current value, clamped to the range | | max | number | 100 | Maximum value | | size | 'md' | 'sm' | 'lg' | 'xl' | 'md' | Ring size | | color | theme color | 'primary' | Ring color |

Composition and accessibility

The element normalizes value, drives the CSS percentage, and exposes matching progressbar ARIA values. Provide aria-label or aria-labelledby on the host.