Loading

Loading shows an animated indicator for loading states. Multiple types and sizes available.

Basic Example

Different loading types and sizes


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

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

const types = ['spinner', 'dots', 'ring', 'ball', 'bars', 'infinity'];

const loaders = div({ class: 'flex flex-wrap gap-8' },
    ...types.map(type => 
        div({ class: 'text-center' },
            Loading({ type, size: 'lg' }),
            p({ class: 'text-sm mt-2 opacity-50' }, type)
        )
    )
);

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

Loading Button

Button with reactive loading state


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

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

const isLoading = signal(false);

const handleClick = async () => {
    isLoading.value = true;
    await new Promise(r => setTimeout(r, 2000));
    isLoading.value = false;
};

const demo = div({ class: 'flex gap-4 items-center' },
    () => isLoading.value
        ? Button({ color: 'primary', disabled: true },
            Loading({ type: 'spinner', size: 'sm' }),
            span({}, ' Processing...')
        )
        : Button({ color: 'primary', onclick: handleClick }, 'Submit'),
    span({ class: 'text-sm opacity-70' },
        () => isLoading.value ? 'Please wait...' : 'Click the button'
    )
);

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

Props

Prop	Type	Default	Description
`type`	string	'spinner'	'spinner' \| 'dots' \| 'ring' \| 'ball' \| 'bars' \| 'infinity'
`size`	string	'md'	'xs' \| 'sm' \| 'md' \| 'lg'
`color`	string	-	Color utility class e.g. 'text-primary'

Types

spinner

dots

ring

ball

bars

infinity

Sizes

Colors

In Button

For more examples and options, see the DaisyUI Loading documentation.