@tadashi/svelte-loading
v3.1.0
Published
Svelte component
Downloads
245
Readme
svelte-loading
Svelte component
Install
$ npm i -S @tadashi/svelte-loading
CSS Vars
vars | default ---------------------------------------------------| -------------------------------- --uib-color | black --uib-size | depends on loader --uib-speed | depends on loader - | - --tadashi_svelte_loading_background_color | hsl(0deg 0% 0% / 20%) --tadashi_svelte_loading_background_image | none --tadashi_svelte_loading_fixed | fixed --tadashi_svelte_loading_top | 0 --tadashi_svelte_loading_left | 0 --tadashi_svelte_loading_width | 100vw --tadashi_svelte_loading_height | 100vh --tadashi_svelte_loading_flex | flex --tadashi_svelte_loading_align_items | center --tadashi_svelte_loading_justify_content | center --tadashi_svelte_loading_zindex | 99
Usage
You can see an example here: https://svelte.dev/repl/be139b8c36074a9e9bbc824d6c8f0130
<script>
import {Loading, acts} from '@tadashi/svelte-loading'
function show() {
acts.show(true)
}
function hide(event) {
if (event.key === 'Escape') {
event.preventDefault()
acts.show(false)
}
}
</script>
<button type="button" on:click={show}>Show</button>
<Loading
animation="ThreeBall"
--tadashi_svelte_loading_background_color="hsl(100deg 50% 50% / 20%)"
--tadashi_svelte_loading_zindex=1011
/>
<svelte:window on:keydown={hide} />
Loaders
Lightweight loaders built by Griffin Johnston for UI Ball.
Donate ❤️
BTC: bc1q7famhuj5f25n6qvlm3sssnymk2qpxrfwpyq7g4
License
MIT © Thiago Lagden MIT © Griffin Johnston