loader

src/components/Loading.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { spring } from 'svelte/motion'
+
+  import { scroll } from '../lib/scroll'
+
+  let el
+  const springed = spring(
+    { scroll: 0 },
+    {
+      stiffness: 0.02,
+      damping: 0.75,
+    }
+  )
+
+  function updateState(value) {
+    const R = 50
+    let alpha = (360 / 1) * value
+    if (alpha === 360) alpha = 359.99999
+    const a = ((90 - alpha) * Math.PI) / 180
+    const x = R + R * Math.cos(a) * 2
+    const y = R - R * Math.sin(a) * 2
+    const center = alpha > 180 ? 1 : 0
+    const path = `M${R},${-50} A${R * 2},${
+      R * 2
+    },0,${center},1,${x},${y} L${R},${R} L${R},${-R}`
+    if (el) el.setAttribute('d', path)
+  }
+
+  $: springed.set({ scroll: $scroll })
+
+  $: updateState($springed.scroll)
+</script>
+
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <path bind:this={el} fill="var(--clr-secondary)" d="" />
+</svg>
+
+<style>
+  svg {
+    position: fixed;
+    bottom: 1em;
+    right: 1em;
+    border: 0.125em solid var(--clr-primary);
+    width: 2em;
+    height: 2em;
+    pointer-events: none;
+  }
+</style>

src/lib/scroll.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store'
+
+export const scroll = writable(0)

src/routes/_layout.svelte

@@ -2,7 +2,9 @@
   import { onMount } from 'svelte'
   import { stores } from '@sapper/app'
 
+  import { scroll } from '../lib/scroll'
   import Nav from '../components/Nav.svelte'
+  import Loading from '../components/Loading.svelte'
 
   export let segment
   let wrapper
@@ -24,13 +26,31 @@
     }
   }
 
+  function updateScroll(e) {
+    const el = e.target
+    const percentage = el.scrollTop / (el.scrollHeight - el.offsetHeight)
+    scroll.set(percentage)
+  }
+
   onMount(() => {
-    const listener = window.addEventListener('resize', resize)
+    const resizeFN = window.addEventListener('resize', resize, false)
+    const scrollFN = main.addEventListener('scroll', updateScroll, false)
     resize()
-    return () => window.removeEventListener(listener)
+    return () => {
+      window.removeEventListener(resizeFN)
+      main.removeEventListener(scrollFN)
+    }
   })
 </script>
 
+<div bind:this={wrapper}>
+  <Nav {segment} />
+  <main bind:this={main}>
+    <slot />
+  </main>
+  <Loading />
+</div>
+
 <style>
   div {
     display: flex;
@@ -56,10 +76,3 @@
     }
   }
 </style>
-
-<div bind:this={wrapper}>
-  <Nav {segment} />
-  <main bind:this={main}>
-    <slot />
-  </main>
-</div>

src/routes/blog/[slug].svelte

@@ -1,6 +1,8 @@
 <script context="module">
   export async function preload({ params }) {
-    return this.fetch(`/api/posts/${params.slug}.json`).then((res) => res.json())
+    return this.fetch(`/api/posts/${params.slug}.json`).then((res) =>
+      res.json()
+    )
   }
 </script>