1 files changed, 49 insertions, 0 deletions
diff --git a/src/lib/layout/Loader.svelte b/src/lib/layout/Loader.svelte
new file mode 100644
index 0000000..8347e16
--- /dev/null
+++ b/src/lib/layout/Loader.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	let progress = 0
+
+	let widthTransitionDuration = 1000
+
+	let opacity = 1
+	function navigationStart() {
+		console.log('navigation start')
+		widthTransitionDuration = 0
+		opacity = 1
+		progress = 0
+		requestAnimationFrame(() => {
+			widthTransitionDuration = 1000
+			progress = 1
+		})
+	}
+	function navigationEnd() {
+		console.log('navigation end', widthTransitionDuration)
+		opacity = 0
+		setTimeout(() => {
+			widthTransitionDuration = 0
+			progress = 0
+		}, 300)
+	}
+</script>
+
+<svelte:window
+	on:sveltekit:navigation-start={navigationStart}
+	on:sveltekit:navigation-end={navigationEnd}
+/>
+
+<div
+	id="loader"
+	style="width:{progress *
+		100}%;transition-duration:{widthTransitionDuration}ms,300ms;opacity:{opacity * 100}%"
+/>
+
+<style>
+	#loader {
+		position: fixed;
+		left: 0px;
+		top: 0px;
+		transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 100ms linear;
+		height: 8px;
+		z-index: 20;
+		/* add a faint glow effect */
+		background: -moz-linear-gradient(top, #16e 0%, #16e 50%, #16e5 50%, #16e0 100%);
+	}
+</style>