Countdown

Countdown displays a numeric value with smooth transition animation. Supports reactive values for live countdowns.

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

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

const display = div({ class: 'flex gap-5' },
    Countdown({ value: 15, class: 'font-mono text-4xl' }),
    span({ class: 'text-4xl' }, ':'),
    Countdown({ value: 30, class: 'font-mono text-4xl' }),
    span({ class: 'text-4xl' }, ':'),
    Countdown({ value: 45, class: 'font-mono text-4xl' })
);

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

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

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

const seconds = signal(30);
const running = signal(false);
let interval = null;

const toggle = () => {
    if (running.value) {
        clearInterval(interval);
        running.value = false;
    } else {
        running.value = true;
        interval = setInterval(() => {
            if (seconds.value > 0) {
                seconds.value--;
            } else {
                clearInterval(interval);
                running.value = false;
            }
        }, 1000);
    }
};

const reset = () => {
    clearInterval(interval);
    running.value = false;
    seconds.value = 30;
};

const demo = div({ class: 'flex flex-col items-center gap-4' },
    Countdown({ value: () => seconds.value, class: 'font-mono text-6xl' }),
    div({ class: 'flex gap-2' },
        Button({ 
            color: () => running.value ? 'error' : 'primary',
            onclick: toggle 
        }, () => running.value ? 'Pause' : 'Start'),
        Button({ onclick: reset }, 'Reset')
    )
);

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

Props

With Labels