implement loader

layouts/_default/baseof.html

@@ -1,4 +1,5 @@
 {{ partial "header.html" . }}
+{{ partial "loader.html" . }}
 
 {{ partial "navbar.html" . }}
 

layouts/partials/loader.html

@@ -0,0 +1,21 @@
+<div class="loadingscreen">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="760.5" height="760" viewBox="0 0 760.5 760" class="loader-logo">
+        <defs>
+          <clipPath id="clip-logo-bold-fixed">
+            <rect width="760.5" height="760"/>
+          </clipPath>
+        </defs>
+        <g id="logo-bold-fixed" clip-path="url(#clip-logo-bold-fixed)">
+          <g id="Logo" transform="translate(-160 -160)">
+            <g id="Border" transform="translate(160 160)">
+              <rect width="760" height="760" stroke="none"/>
+              <rect x="15" y="15" width="730" height="730" fill="none"/>
+            </g>
+            <line id="Horizontal" y2="736" transform="translate(540.5 170.5)"/>
+            <line id="Vertical" x2="725" transform="translate(181.5 540.5)"/>
+            <line id="Top-Left" x2="359" y2="358" transform="translate(181 182)"/>
+            <line id="Top-Right" x1="359" y2="358" transform="translate(541.5 181.5)"/>
+          </g>
+        </g>
+      </svg>  
+</div>

static/main.js

@@ -1,5 +1,6 @@
 // Add event listeners
 document.addEventListener('DOMContentLoaded', async function(){
+    setTimeout(() => {
         scrollTopVisibilityUpdate();
         updateNavStyle();
         calculateAge(".age");
@@ -12,6 +13,15 @@ document.addEventListener('DOMContentLoaded', async function(){
     
         // load projects
         loadMoreContent('.project-list', 6);
+    
+        // hide loader
+        const loader = document.querySelector('.loadingscreen');
+        loader.classList.add('fade-out-no-scale');
+        //loader.classList.add('hidden');
+        setTimeout(() => {
+            loader.classList.add('hidden');
+        }, 250);
+    }, 250);
 });
 
 window.addEventListener('scroll', function(){

static/style.css

@@ -48,6 +48,46 @@ body{
     max-width: clamp(1100px, 90%, 1250px);
 }
 
+/* LOADER */
+/* animation credits: https://uiverse.io/shadowmurphy/yellow-lizard-30 */
+.loadingscreen{
+    width: 100%;
+    height: 100dvh;
+    background: var(--primary);
+    z-index: 1002;
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    transition: var(--baseTransition);
+}
+
+.loadingscreen.hidden{
+    display: none;
+}
+
+.loader-logo{
+    width: 45%;
+    max-width: 200px;
+    fill: transparent;
+    stroke: var(--color);
+    stroke-linecap: round;
+    stroke-width: 2.4rem;
+    stroke-dashoffset: var(--dashoffset);
+    stroke-dasharray: 0 var(--dashoffset);
+    animation: loader 3.5s linear infinite;
+
+    --dashoffset: 1384;
+}
+
+@keyframes loader {
+    90%, 100%{
+        stroke-dashoffset: 0;
+        stroke-dasharray: var(--dashoffset) 0;
+    }
+}
+
 /* NAVIGATION */
 nav{
     width: 100%;
@@ -1030,6 +1070,24 @@ nav.small .nav-links a:last-child:focus{
         animation-range: entry 0 cover var(--animationCoverValue);
         overflow: hidden;
     }
+
+    .fade-in{
+        animation: fade-in var(--baseDuration) linear;
+        animation-fill-mode: forwards;
+        overflow: hidden;
+    }
+
+    .fade-out{
+        animation: fade-out var(--baseDuration) linear;
+        animation-fill-mode: forwards;
+        overflow: hidden;
+    }
+
+    .fade-out-no-scale{
+        animation: fade-out-no-scale var(--baseDuration) linear;
+        animation-fill-mode: forwards;
+        overflow: hidden;
+    }
 }
 
 @keyframes fade-up{
@@ -1111,3 +1169,13 @@ nav.small .nav-links a:last-child:focus{
         scale: 0;
     }
 }
+
+@keyframes fade-out-no-scale{
+    0%{
+        opacity: 1;
+    }
+
+    100%{
+        opacity: 0;
+    }
+}