From 1871627b180d6a448235cf7663ff95d33d5d78cf Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 12:31:02 -0500
Subject: [PATCH] Changed loading screen animations and icon

---
 src/layouts/partials/preloader.html | 75 ++++++++++++-----------------
 1 file changed, 31 insertions(+), 44 deletions(-)

diff --git a/src/layouts/partials/preloader.html b/src/layouts/partials/preloader.html
index 7047243..e32e10a 100644
--- a/src/layouts/partials/preloader.html
+++ b/src/layouts/partials/preloader.html
@@ -1,63 +1,50 @@
-<div class="preloader">
-  <div class="loading">
-    <p class="teal">steeping</p>
+<div id="preloader">
+  <div id="status">
+    <i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead"></i>
+    <div id="loading-text"><p class="grid-gray">steeping...</p></div>
   </div>
 </div>
 
 <style>
-
-  .preloader {
+  .tea-icon{
+    display:block;
+    text-align:center;
+    animation: pulse 1s infinite;
+  }
+  @keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+  }
+  #preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #1a1a1a;
+    background: #1a1a1a;
     z-index: 9999;
   }
-
-  .loading {
+  #status {
+    width: 200px;
+    height: 200px;
     position: absolute;
-    top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 30px;
-    color: #333;
+    top: 50%;
+    background-position: center;
+    margin: -100px 0 0 -100px;
   }
-
-  .loading:before {
-    content: "";
-    display: block;
-    width: 32px;
-    height: 32px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 20px;
-    border-radius: 50%;
-    border: 2px solid #00ffd0;
-    border-color: #fff transparent #00ffd0 transparent;
-    animation: lds-dual-ring 1.2s linear infinite;
+  #loading-text {
+    font-size: 20px;
+    text-align: center;
+    margin-top: 10px;
+    animation: pulse 1s 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);
-  }
-
+  $(window).on('load', function() {
+    $('#status').fadeOut();
+    $('#preloader').delay(350).fadeOut('slow');
+  });
 </script>