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

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes