feat: add loading bar component

src/lib/components/BackToTop.svelte

@@ -23,7 +23,7 @@
 <svelte:window on:scroll={handleScroll} />
 
 {#if showButton}
-	<div class="fixed bottom-10 right-10 z-40" transition:fly={{ y: 50, duration: 150 }}>
+	<div class="fixed bottom-10 right-10 z-30" transition:fly={{ y: 50, duration: 150 }}>
 		<Button size="icon" class="scale-125 md:scale-150" on:click={scrollToTop}><ChevronUp /></Button>
 	</div>
 {/if}

src/lib/components/LoadingBar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Progress } from 'bits-ui';
+	import { fly } from 'svelte/transition';
+
+	export let state: 'loading' | 'done' = 'done';
+
+	let value = 0;
+
+	let hidden = true;
+
+	$: {
+		if (state === 'loading') {
+			hidden = false;
+			value = 0;
+		} else {
+			hidden = false;
+			value = 100;
+		}
+		setTimeout(() => {
+			hidden = true;
+		}, 1500);
+	}
+</script>
+
+{#if !hidden}
+	<div class="fixed top-0 right-0 w- z-40" transition:fly={{ y: -25, duration: 500 }}>
+		<Progress.Root
+			{value}
+			max={100}
+			class="relative h-[15px] overflow-hidden bg-dark-10 shadow-mini-inset rounded-r-xl"
+		>
+			<div
+				class="h-full w-full flex-1 bg-foreground shadow-mini-inset transition-all duration-1000 ease-in-out rounded-r-xl"
+				style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (100 ?? 1)}%)`}
+			/>
+		</Progress.Root>
+	</div>
+{/if}

src/lib/components/Navbar/Navbar.svelte

@@ -26,7 +26,7 @@
 	});
 </script>
 
-<nav class="h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-40 font-display">
+<nav class="h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-30 font-display">
 	<div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
 		<Drawer />
 		{#if current === 'blog'}

src/lib/components/Toc/TocHeader.svelte

@@ -23,7 +23,7 @@
 	};
 </script>
 
-<nav class="fixed top-24 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden">
+<nav class="fixed top-24 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-20 lg:hidden">
 	<Accordion.Root class="px-8" bind:value>
 		<Accordion.Item value="toc">
 			<Accordion.Trigger

src/routes/+layout.svelte

@@ -10,9 +10,12 @@
 	import { Toaster } from '$lib/components/ui/sonner';
 	import { onMount } from 'svelte';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
+	import LoadingBar from '$lib/components/LoadingBar.svelte';
 
 	let root: HTMLElement | null;
 
+	let loadingState: 'loading' | 'done' = 'done';
+
 	onMount(() => {
 		root = document.getElementsByTagName('html')[0];
 
@@ -21,16 +24,20 @@
 
 	beforeNavigate(() => {
 		root?.classList.remove('smoothscroll');
+		loadingState = 'loading';
 	});
 
 	afterNavigate(() => {
 		root?.classList.add('smoothscroll');
+		loadingState = 'done';
 	});
 </script>
 
 <Toaster />
 <ModeWatcher />
 
+<LoadingBar state={loadingState} />
+
 <Navbar />
 <div class="pt-24">
 	<slot />