collection of loading spinners with Svelte.js

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

or

yarn add -D svelte-loading-spinners

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}

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.

List of all spinner: Demo