Preload indicator

__layout.svelte

<script lang="ts">
  import PreloadingIndicator from '$lib/PreloadingIndicator.svelte';
</script>

<!-- ... normal layout stuff -->
<PreloadingIndicator/>

<!-- ...more layout stuff -->
<slot/>

PreloadingIndicator.svelte

<!--
	original implementation:
	https://dev.to/shajidhasan/add-a-youtube-like-page-loading-animation-in-sveltekit-58kp
-->
<script lang="ts">
	import { tweened } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';
	import { navigating } from '$app/stores';
	import { writable } from 'svelte/store';
	import { onMount } from 'svelte';
  
	let visible: 'loading' | 'loaded' | string = '';
	const currentState = writable<typeof visible>(null);
	const progress = tweened(0, {
		easing: cubicOut,
	});

	const opacity = tweened(1, { easing: cubicOut });

	const unsubscribe = currentState.subscribe((state) => {
		if (state === 'loading') {
			opacity.set(1, { duration: 0 });

			progress.set(0.7, { duration: 3000 });
		} else if (state === 'loaded') {
			const duration = 1000;

			progress.set(1, { duration });
			opacity.set(0, { duration: duration / 2, delay: duration / 2 });

			setTimeout(() => {
				progress.set(0, { duration: 0 });
			}, duration);
		}
	});

	$: $currentState = $navigating != null ? 'loading' : 'loaded';

	// $: console.log($currentState, $progress, $progress * 100);

	onMount(() => {
		return () => unsubscribe();
	});
</script>

<div class="progress-container" style={`opacity: ${$opacity}`}>
	<div class="progress" style={`--width: ${$progress}`} />
</div>

<style>
	.progress-container {
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		pointer-events: none;

		height: 0.275em;
		z-index: 999;

		background-color: hsl(345deg 93% 18%);
	}
	.progress {
		/* position: absolute; */
		left: 0;
		top: 0;
		height: 100%;
		background-color: #ff0040;
		transition: width 0.4s;
		pointer-events: none;
		transform-origin: left;
		transform: scaleX(var(--width));
	}
</style>