0.2.1 • Published 2 years ago
svelte-loading-overlay v0.2.1
Svelte loading overlay
Simple svelte component to display custom loading screen.
Documentation
For more info see the documentation : https://github.com/imIfOu/svelte-loading-overlay/wiki
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());