Loader

The Loader component is used to indicate that a page or component is loading.

Properties

Examples

Sizes

<Loader size={12} />
<Loader size="small" />
<Loader size="medium" />
<Loader size="large" />
<Loader size={48} />

Colors

<Loader color="var(--red)" colorTrack="var(--red-light)" />
<Loader color="var(--green)" colorTrack="var(--green-light)" />
<Loader color="var(--orange)" colorTrack="var(--orange-light)" />

Inverted Colors

You can quickly invert the colors of the loader by setting the invert prop to true. This is useful in cases where the loader is displayed on a dark background, for example in a button with the accent color.

<Button>
    Submit
    <Loader slot="action" size="small" invert />
</Button>

Block Loader

You can display the loader as a block element by setting the block prop to true. You can optionally set a message using the default slot.

<Loader block>
    Loading...
</Loader>

You can set padding={number} or padding="small|medium|large" to add padding to the loader. By default, padding="medium" is used.

Full Loader

You can set full prop to true to make the loader take up the full width and height of its parent. Padding is not applied in this case.

<div style="height=200px">
    <Loader full>
        Loading...
    </Loader>
</div>

Inline Loader with Message

<Loader>
    Loading...
</Loader>

States

You can set the state prop to loading, success or error to display the corresponding loaderState

<script lang="ts">
    let loaderStateS: 'loading' | 'none' | 'error' | 'success' = 'none';
    let loaderStateE: 'loading' | 'none' | 'error' | 'success' = 'none';

    function handleButtonClickS() {
        loaderStateS = 'loading'

        setTimeout(() => {
            loaderStateS = 'success';
        }, 2000)
    }

    function handleButtonClickE() {
        loaderStateE = 'loading'

        setTimeout(() => {
            loaderStateE = 'error';
        }, 2000)
    }
</script>

<Button on:click={handleButtonClickS}>Toggle State Success 
    <Loader slot="action" size="small" state={loaderStateS} />  
</Button>

<Button on:click={handleButtonClickE}>Toggle State Error
    <Loader slot="action" size="small" state={loaderStateE} />  
</Button>

Load Button

You will often need to display a button with a loader conditionally. The LoadButton component can be used for this purpose. One common use case is to display a button to load more items in a list.

<LoadButton
    text="Load More"
    show={hasMore}
    loading={isLoadingMore}
    on:click={handleLoadMore}
/>