svelte-loading-animation

Collection of simple and light-weight CSS loading animations / spinners for Svelte.

Available Loading Animations

Currently we have 7 loading animations | Animation | Component Name | Description | | ------ | --- | ---- | | Bars | LoadBars | 3 vertical bars animated | | Coin | LoadCoin | Flipping / spinning circle | | Ellipsis | LoadEllipsis | 3 dots animated | | Hour Glass | LoadHourGlass | Simple hour glass animation | | Ring | LoadRing | Chasing ring animation | | Ripple | LoadRipple | Ripple animation | | Spinner | LoadSpinner | Basic spinner |

Installation

npm install svelte-loading-animation

Usage

First you need to import the desired animation(s) on the script section

// ...
	import { LoadRing, LoadRipple } from 'svelte-loading-animation';
// ...

and then use it on your application. Here's some example code:

  <LoadRipple />

  <LoadRing />

By default, they have Svelte's orange color and 64px*64px size. You can customize the looks by passing available properties.

Properties

| Property | Default | Accepted Value | | ----- | ----- | ------ | | color | #ff3e00 | Any CSS background color | | size | 64px | Integer or decimal in px, em, rem |

Some samples with props:

  <LoadHourGlass size="64px" color="#d43ef1"/>
  <LoadBars size="64px" color="red"/>
  <LoadSpinner size="5.5rem" color="rgba(0,0,0,.32)"/>

License

MIT