Svelte component
$ npm i -S @tadashi/svelte-loading
vars | default |
---|---|
--uib-color | black |
--uib-size | depends on loader |
--uib-speed | depends on loader |
- | - |
--tadashi-svelte-loading-background-color | oklch(0% 0 0 / 0.3) |
--tadashi-svelte-loading-duration | 0.5s |
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% / 40%)"
/>
<svelte:window on:keydown={hide} />
Lightweight loaders built by Griffin Johnston for UI Ball.
BTC: bc1q7famhuj5f25n6qvlm3sssnymk2qpxrfwpyq7g4
MIT © Thiago Lagden MIT © Griffin Johnston