From 241863ebc93d8e6e73e79caa64b098151c9e2a29 Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Sat, 22 Mar 2025 22:42:40 +0100
Subject: [PATCH] implement loader

---
 layouts/_default/baseof.html |  1 +
 layouts/partials/loader.html | 21 +++++++++++
 static/main.js               | 34 +++++++++++-------
 static/style.css             | 68 ++++++++++++++++++++++++++++++++++++
 4 files changed, 112 insertions(+), 12 deletions(-)
 create mode 100644 layouts/partials/loader.html

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a1b2393..1bd633f 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,4 +1,5 @@
 {{ partial "header.html" . }}
+{{ partial "loader.html" . }}
 
 {{ partial "navbar.html" . }}
 
diff --git a/layouts/partials/loader.html b/layouts/partials/loader.html
new file mode 100644
index 0000000..43dda50
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/static/main.js b/static/main.js
index 1d1b147..ac42288 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,17 +1,27 @@
 // Add event listeners
 document.addEventListener('DOMContentLoaded', async function(){
-    scrollTopVisibilityUpdate();
-    updateNavStyle();
-    calculateAge(".age");
-
-    // add eventlistener to language selector
-    const languageSelector = document.querySelector(".language-selector");
-    languageSelector.addEventListener('change', function(){
-        window.location.href = languageSelector.value + window.location.hash;
-    });
-
-    // load projects
-    loadMoreContent('.project-list', 6);
+    setTimeout(() => {
+        scrollTopVisibilityUpdate();
+        updateNavStyle();
+        calculateAge(".age");
+    
+        // add eventlistener to language selector
+        const languageSelector = document.querySelector(".language-selector");
+        languageSelector.addEventListener('change', function(){
+            window.location.href = languageSelector.value + window.location.hash;
+        });
+    
+        // 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(){
diff --git a/static/style.css b/static/style.css
index 4d5ac0a..97c2e18 100644
--- a/static/style.css
+++ b/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{
@@ -1110,4 +1168,14 @@ nav.small .nav-links a:last-child:focus{
         opacity: 0;
         scale: 0;
     }
+}
+
+@keyframes fade-out-no-scale{
+    0%{
+        opacity: 1;
+    }
+
+    100%{
+        opacity: 0;
+    }
 }
\ No newline at end of file