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 | oklch(0% 0 0 / 0.3) | | --tadashi-svelte-loading-duration | 0.5s |

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% / 40%)"
/>

<svelte:window on:keydown={hide} />

Loaders

Lightweight loaders built by Griffin Johnston for UI Ball.

Buy Me a Coffee

BTC: bc1q7famhuj5f25n6qvlm3sssnymk2qpxrfwpyq7g4

License

MIT © Thiago Lagden MIT © Griffin Johnston