Radial Progress

Radial progress shows a circular progress indicator. Supports custom colors, sizes, and thickness.

Basic Example

Static radial progress indicators



const { default: RadialProgress } = await import('/components/data-display/radial-progress.js');

const { tags, $ } = Lightview;
const { div } = tags;

const demo = div({ class: 'flex gap-4' },
    RadialProgress({ value: 0 }, '0%'),
    RadialProgress({ value: 25 }, '25%'),
    RadialProgress({ value: 50, color: 'primary' }, '50%'),
    RadialProgress({ value: 75, color: 'secondary' }, '75%'),
    RadialProgress({ value: 100, color: 'success' }, '100%')
);

$('#demo').insert(demo);

Animated Progress

Live updating progress indicator



const { default: RadialProgress } = await import('/components/data-display/radial-progress.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div } = tags;

const progress = signal(0);
let interval;

const start = () => {
    if (interval) return;
    interval = setInterval(() => {
        progress.value = (progress.value + 1) % 101;
    }, 50);
};

const stop = () => {
    clearInterval(interval);
    interval = null;
};

const demo = div({ class: 'flex flex-col items-center gap-4' },
    RadialProgress({ 
        value: () => progress.value,
        size: '8rem',
        color: () => progress.value >= 100 ? 'success' : 'primary'
    }, () => `${progress.value}%`),
    div({ class: 'flex gap-2' },
        Button({ size: 'sm', onclick: start }, 'Start'),
        Button({ size: 'sm', onclick: stop }, 'Stop'),
        Button({ size: 'sm', onclick: () => { progress.value = 0; } }, 'Reset')
    )
);

$('#demo').insert(demo);

Props

Prop Type Default Description
value number | signal 0 Progress value (0-100)
size string - CSS size value (e.g., '8rem')
thickness string - Line thickness (e.g., '4px', '1rem')
color string - 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error'

Colors

70%
70%
70%
70%

Custom Size & Thickness

70%
70%
70%
For more examples, see the DaisyUI Radial Progress documentation.