Progress

Progress bar shows the progression of a task. Supports reactive values and multiple colors.

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

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

const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'];

const progressBars = div({ class: 'flex flex-col gap-4 w-64' },
    ...colors.map((color, i) => 
        Progress({ 
            value: 30 + i * 10, 
            max: 100, 
            color
        })
    )
);

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

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

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

const progress = signal(0);
const isRunning = signal(false);
let interval = null;

const startDownload = () => {
    if (isRunning.value) return;
    progress.value = 0;
    isRunning.value = true;
    interval = setInterval(() => {
        progress.value += Math.random() * 15;
        if (progress.value >= 100) {
            progress.value = 100;
            isRunning.value = false;
            clearInterval(interval);
        }
    }, 200);
};

const demo = div({ class: 'flex flex-col gap-4 w-72' },
    Progress({ 
        value: () => progress.value, 
        max: 100, 
        color: 'success',
        class: 'w-full'
    }),
    p({ class: 'font-mono text-sm' }, 
        () => progress.value >= 100 
            ? '✓ Complete!' 
            : `Downloading: ${Math.round(progress.value)}%`
    ),
    Button({ 
        color: 'primary',
        size: 'sm',
        disabled: () => isRunning.value,
        onclick: startDownload
    }, () => isRunning.value ? 'Downloading...' : 'Start Download')
);

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

Props

Colors

Indeterminate

Omit the value attribute for indeterminate state