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