svelte-loading-spinners

collection of loading spinners with Svelte.js

Installation

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

or

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.

<script>
	import { Jumper } from 'svelte-loading-spinners';
	import { navigating } from '$app/stores'
</script>

{#if $navigating}
	<Jumper size="60" color="#FF3E00" unit="px" duration="1s" />
{/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