Radial progress shows a circular progress indicator.
Supports custom colors, sizes, and thickness.
Basic Example
Static radial progress
indicators
await import('/components/data-display/radial-progress.js');
const { tags, $ } = Lightview;
const { div, RadialProgress } = tags;
const demo = div({ style: 'display: flex; gap: 1rem' },
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%')
);
$('#example').content(demo);
await import('/components/data-display/radial-progress.js');
const { $, tags } = Lightview;
const { RadialProgress } = tags;
const demo = {
tag: 'div',
attributes: { style: 'display: flex; gap: 1rem' },
children: [
{ tag: RadialProgress, attributes: { value: 0 }, children: ['0%'] },
{ tag: RadialProgress, attributes: { value: 25 }, children: ['25%'] },
{ tag: RadialProgress, attributes: { value: 50, color: 'primary' }, children: ['50%'] },
{ tag: RadialProgress, attributes: { value: 75, color: 'secondary' }, children: ['75%'] },
{ tag: RadialProgress, attributes: { value: 100, color: 'success' }, children: ['100%'] }
]
};
$('#example').content(demo);
await import('/components/data-display/radial-progress.js');
const { $ } = Lightview;
const demo = {
div: {
style: 'display: flex; gap: 1rem',
children: [
{ RadialProgress: { value: 0, children: ['0%'] } },
{ RadialProgress: { value: 25, children: ['25%'] } },
{ RadialProgress: { value: 50, color: 'primary', children: ['50%'] } },
{ RadialProgress: { value: 75, color: 'secondary', children: ['75%'] } },
{ RadialProgress: { value: 100, color: 'success', children: ['100%'] } }
]
}
};
$('#example').content(demo);
<!-- Import the component (registers lv-radial-progress) -->
<script type="module" src="/components/data-display/radial-progress.js"></script>
<div style="display: flex; gap: 1rem;">
<lv-radial-progress value="0">0%</lv-radial-progress>
<lv-radial-progress value="25">25%</lv-radial-progress>
<lv-radial-progress value="50" color="primary">50%</lv-radial-progress>
<lv-radial-progress value="75" color="secondary">75%</lv-radial-progress>
<lv-radial-progress value="100" color="success">100%</lv-radial-progress>
</div>
await import('/components/data-display/radial-progress.js');
await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, RadialProgress, Button } = 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({ style: 'display: flex; flex-direction: column; align-items: center; gap: 1rem' },
RadialProgress({
value: () => progress.value,
size: '8rem',
color: () => progress.value >= 100 ? 'success' : 'primary'
}, () => `${progress.value}%`),
div({ style: 'display: flex; gap: 0.5rem' },
Button({ size: 'sm', onclick: start }, 'Start'),
Button({ size: 'sm', onclick: stop }, 'Stop'),
Button({ size: 'sm', onclick: () => { progress.value = 0; } }, 'Reset')
)
);
$('#example').content(demo);
await import('/components/data-display/radial-progress.js');
await import('/components/actions/button.js');
const { signal, $, tags } = Lightview;
const { RadialProgress, Button } = 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 = {
tag: 'div',
attributes: { style: 'display: flex; flex-direction: column; align-items: center; gap: 1rem' },
children: [
{
tag: RadialProgress,
attributes: {
value: () => progress.value,
size: '8rem',
color: () => progress.value >= 100 ? 'success' : 'primary'
},
children: [() => `${progress.value}%`]
},
{
tag: 'div',
attributes: { style: 'display: flex; gap: 0.5rem' },
children: [
{ tag: Button, attributes: { size: 'sm', onclick: start }, children: ['Start'] },
{ tag: Button, attributes: { size: 'sm', onclick: stop }, children: ['Stop'] },
{ tag: Button, attributes: { size: 'sm', onclick: () => { progress.value = 0; } }, children: ['Reset'] }
]
}
]
};
$('#example').content(demo);
await import('/components/data-display/radial-progress.js');
await import('/components/actions/button.js');
const { signal, $ } = Lightview;
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: {
style: 'display: flex; flex-direction: column; align-items: center; gap: 1rem',
children: [
{
RadialProgress: {
value: () => progress.value,
size: '8rem',
color: () => progress.value >= 100 ? 'success' : 'primary',
children: [() => `${progress.value}%`]
}
},
{
div: {
style: 'display: flex; gap: 0.5rem',
children: [
{ Button: { size: 'sm', onclick: start, children: ['Start'] } },
{ Button: { size: 'sm', onclick: stop, children: ['Stop'] } },
{ Button: { size: 'sm', onclick: () => { progress.value = 0; }, children: ['Reset'] } }
]
}
}
]
}
};
$('#example').content(demo);