Svelte loading overlay

Simple svelte component to display custom loading screen.

Getting Started

Install dependency : npm i svelte-loading-overlay

You can manipulate the library in two ways :

Component

<script>
    import Loader from 'svelte-loading-overlay/Loader.svelte';

    let container;
    let active = true;
    let cancellable = true;
    let lockScroll = false;
    let fullScreen = false;
    let selectShape = 'RotateSquare';
</script>

<div bind:this={container}>
    <Loader
        bind:active
        {cancellable}
        {fullScreen}
        {lockScroll}
        {container}
        component={selectShape}
        color="blue"
    />
    <h3>Lorem Ipsum</h3>
    <p>
        Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
    </p>
</div>

Methods

import { show } from 'svelte-loading-overlay';

const loader = show({
    cancellable: true,
    component: 'RotateSquare',
    color: 'blue'
});

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, 1000);
}).finally(() => loader.hide());

Props

ℹ️ Other props will be passed directly at the loader component

Loader Component values

Slots