Spinner on load on dashboard

public/css/dashboard.css

@@ -717,4 +717,53 @@ option
 {
   cursor: pointer;
 }
+.spinnerContainer
+{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bt-spinner {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: 4px solid #222;
+  border-top-color: #009688;
+  -webkit-animation: 1s spin linear infinite;
+  animation: 1s spin linear infinite;
+}
+-webkit-@keyframes spin {
+  -webkit-from {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  -webkit-to {
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

views/dashboard.ejs

@@ -25,7 +25,10 @@
         <%- include('guilds.ejs') %>         
     </div>
     <div id="PopUpContainer" class="PopUpContainer hidden">
-
+        <div class="spinnerContainer">
+            <div class="bt-spinner">
+            </div>
+        </div>
     </div>
 </body>
 

views/strikesDashboard.ejs

@@ -17,5 +17,9 @@
 </div>
 <div id="maindisplay">
     <%- include('strikelist.ejs') %>
+    <div class="spinnerContainer htmx-indicator">
+        <div class="bt-spinner">
+        </div>
+    </div>
 </div>