A progress bar for navigation in a SvelteKit app (like what YouTube does!)

NavigationProgressBar.svelte

<script>
	import { beforeNavigate, afterNavigate } from '$app/navigation';

	import { tweened } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';

	// Duration of transitions in milliseconds
	const duration = 400;
	// Svelte store with slew
	const progress = tweened(0, { duration: duration, easing: cubicOut });

	let opacity = 0;

	beforeNavigate(() => {
		progress.set(0, { duration: 0 });
		opacity = 1;
		$progress = 0.7;
	});

	afterNavigate(() => {
		$progress = 1;
		setTimeout(() => {
			opacity = 0;
		}, duration - 200);
		setTimeout(() => {
			progress.set(0, { duration: 0 });
		}, duration);
	});
</script>

<div class="fixed top-0 left-0 w-full h-1 z-50">
	<!-- This is the actual progress bar -->
	<div
		class="w-[var(--width)] h-full nice-gradient transition-opacity duration-300"
		style:opacity
		style:--width="{$progress * 100}%"
	/>
</div>

<style>
	/* Nice gradient using Josh Comeau's generator */
	.nice-gradient {
		background-image: linear-gradient(
			75deg,
			rgb(239 68 68) 0%,
			rgb(255, 97, 92) 33%,
			rgb(255, 160, 123) 67%,
			rgb(255, 208, 0) 100%
		);
	}
</style>