src/lib/components/Loading.svelte

@@ -0,0 +1,73 @@
+<style>
+    .loader {
+        position: absolute;
+        top: calc(50% - 32px);
+        left: calc(50% - 32px);
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        perspective: 800px;
+    }
+
+    .inner {
+        position: absolute;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+    }
+
+    .inner.one {
+        left: 0%;
+        top: 0%;
+        animation: rotate-one 1s linear infinite;
+        border-bottom: 3px solid #efeffa;
+    }
+
+    .inner.two {
+        right: 0%;
+        top: 0%;
+        animation: rotate-two 1s linear infinite;
+        border-right: 3px solid #efeffa;
+    }
+
+    .inner.three {
+        right: 0%;
+        bottom: 0%;
+        animation: rotate-three 1s linear infinite;
+        border-top: 3px solid #efeffa;
+    }
+
+    @keyframes rotate-one {
+        0% {
+            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+        }
+        100% {
+            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+        }
+    }
+
+    @keyframes rotate-two {
+        0% {
+            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+        }
+        100% {
+            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+        }
+    }
+
+    @keyframes rotate-three {
+        0% {
+            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+        }
+        100% {
+            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+        }
+    }
+</style>
+
+<div class="loader">
+    <div class="inner one" />
+    <div class="inner two" />
+    <div class="inner three" />
+</div>

src/main.svelte

@@ -6,6 +6,7 @@
     import Skills from './skills.svelte';
 
     import Timeline from "./timeline.svelte";
+	import Loading from "$lib/components/Loading.svelte";
 </script>
 
 <style>
@@ -65,11 +66,7 @@
 </style>
 
 {#await getJson('/json/me.json')}
-    <div class="card">
+    <Loading />
-        <div class="card-header">
-            <h1>Loading...</h1>
-        </div>
-    </div>
 {:then info}
     <div class="main-card">
         <div class="card-header">

src/routes/repos/+page.svelte

@@ -4,6 +4,7 @@
     import { repos, loadRepos, addToast } from "$lib/stores";
     import { timeSince } from "$lib/api/git";
     import Card from "$lib/components/Cards/Card.svelte";
+    import Loading from "$lib/components/Loading.svelte";
 
     onMount(loadRepos);
 </script>
@@ -33,6 +34,6 @@
             {/each}
         </div>
     {:else}
-        <p>Loading repositories...</p>
+        <Loading />
     {/if}
 </div>