Zennなどに実装されている、ページ遷移時にページ上部に表示されるプログレスバーを作りました。

Svelte

Svelteにはanimation用の関数が組み込みで搭載されており、今回はその中のひとつmotionを使用します。

Svelte以外の依存なく、下記のコードだけで実装できます。

src/lib/PageProgressBar.svelte

<script lang="ts">

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

	export let loading: boolean;

	const progress = tweened(0, {
		duration: 2000,
		easing: cubicOut
	});

	$: if (loading) {
		progress.set(1);
	} else {
		// 読み込みが完了した後、素早く1まで進め、0にする。
		$progress && progress.set(1, { duration: 100 }).then(() => progress.set(0, { duration: 0 }));
	}

	$: width = `${$progress * 100}%`;
</script>

<div class="progress-bar" style:width />

<style>
	.progress-bar {
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;
		height: 3px;
		background-color: red;
		z-index: 9999;
	}
</style>

motionでsetした値はリセットされることがないので、progress.set(0, { duration: 0 })で0にリセットしています。

Svelte Kit

上記のコンポーネントをSvelte Kitで使用する場合、$app/storesのnavigatingを使用します。

具体的には以下のようなコードです。

src/routes/__layout.svelte

<script lang="ts">
	import { navigating } from '$app/stores';
	import { PageProgressBar } from '$lib/PageProgressBar.svelte'; // 上記のコンポーネント
</script>

<PageProgressBar loading={!!$navigating} />
<slot />

navigatingはナビゲーション時には{ from, to }のオブジェクト、それ以外はnullの値を持ちます。

以上になります。Svelteにはmotion以外にもanimation用の機能があり、簡単にアニメーションを作ることができます。