@tadashi/svelte-loading NPM

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} />