Loader

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

Properties

Name
Default
Description
size
medium
The size of the loader.
  • small (16px)
  • medium (24px)
  • large (32px)
  • a number in pixels
color
var(--accent)
The color of the loader circle.
colorTrack
var(--accent-lightest)
The color of the loader circle track.
state
loading
The state of the loader.
  • loading
  • success
  • error
  • none
invert
false
Inverts the loader colors.
block
false
If true, the loader will be displayed as a block element.
full
false
If true, the loader will take up the full width and height of its parent. The loader and the message will be centered.
padding
medium (block only)
Padding around the loader wrap. Can be a number in pixels or one of the following strings:
  • none (0px)
  • small (60px)
  • medium (150px)
  • large (250px)

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>
Loading...

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>
Full Loader (200px height, centered)

Inline Loader with Message

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

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}
/>