svelte-loading-spinners

> collection of loading spinners with Svelte.js

Installation

``bash
npm i --save-dev svelte-loading-spinners
`

or

`bash
yarn add -D svelte-loading-spinners
`

Usage

Import navigating from $app/stores.
When navigating starts, it's value is a Navigation object with from, to, type and (if type === 'popstate') delta properties. When navigating finishes, its value reverts to null.

Read More: Sveltekit Docs and Stackoverflow


By using an {#if $navigating} this allows us to show the loading animation when the page is loading and stop once it's fully rendered.

`svelte


{#if $navigating}

{/if}
`

List of available spinners

Props: size, color, unit, duration and pause.
The default props; unit is px, color is #FF3E00 and size 60px.

Notes:

Circle2 instead of the color and duration props has colorOuter, colorCenter, colorInner, durationOuter, durationCenter, durationInner props.

Circle3 has ballTopLeft, ballTopRight, ballBottomLeft and ballBottomRight` as props aswell.

| Loaders |
| -----------: |
| BarLoader |
| Chasing |
| Circle |
| Circle2 |
| Circle3 |
| DoubleBounce |
| Firework |
| Jellyfish |
| Jumper |
| Pulse |
| Rainbow |
| RingLoader |
| ScaleOut |
| Shadow |
| SpinLine |
| Stretch |
| SyncLoader |
| Wave |
| Square |
| Moon |

Demo

List of all spinner: Demo

Development Setup