From 8fb30a195771b7c7cef733a17a3eddcf4c9ae55d Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 19 Jan 2023 14:22:55 -0500
Subject: [PATCH] Initial website preloader

---
 src/layouts/partials/head.html      |  2 +
 src/layouts/partials/preloader.html | 61 +++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/layouts/partials/preloader.html

diff --git a/src/layouts/partials/head.html b/src/layouts/partials/head.html
index c799a6e..be6bd0c 100644
--- a/src/layouts/partials/head.html
+++ b/src/layouts/partials/head.html
@@ -105,6 +105,8 @@
       }
     </script>
 
+    {{- partial "preloader.html" -}}
+
     {{- partial "auth-data-snippet.html" -}}
 
     {{- partial "toast.html" -}}
diff --git a/src/layouts/partials/preloader.html b/src/layouts/partials/preloader.html
new file mode 100644
index 0000000..7c80bcd
--- /dev/null
+++ b/src/layouts/partials/preloader.html
@@ -0,0 +1,61 @@
+<div class="preloader">
+  <div class="loading">
+    <p class="teal">Loading...</p>
+  </div>
+</div>
+
+<style>
+
+  .preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1a1a;
+    z-index: 9999;
+  }
+
+  .loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 30px;
+    color: #333;
+  }
+
+  .loading:after {
+    content: "";
+    display: block;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid #fff;
+    border-color: #fff transparent #fff transparent;
+    animation: lds-dual-ring 1.2s linear infinite;
+  }
+
+  @keyframes lds-dual-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+</style>
+
+<script>
+
+  window.onload = function() {
+      var preloader = document.querySelector(".preloader");
+      preloader.style.opacity = "0";
+      setTimeout(function(){
+          preloader.style.display = "none";
+      }, 1000);
+  }
+
+</script>