Theme:

Radial Progress

A circular progress ring driven by a --value (0–100) custom property. Tune --size and --thickness inline.

Values

25%

50%

75%

100%

<div class="dui-radial-progress" style="--value: 75;">75%</div>

Colors & Sizes

70%

60%

90%

<div class="dui-radial-progress dui-radial-progress-accent" style="--value: 60; --size: 7rem; --thickness: 0.75rem;">60%</div>