From 37e2a74c3960709b8d6f9570c4e87ff291cb0999 Mon Sep 17 00:00:00 2001
From: glax <glax@insipience.de>
Date: Fri, 8 Sep 2023 16:32:09 +0200
Subject: [PATCH] Added loader-circle

---
 Website/index.html |  5 +++++
 Website/style.css  | 40 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/Website/index.html b/Website/index.html
index 244ebcd..c698261 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -20,6 +20,11 @@
       <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
     </topbar>
     <viewport>
+      <div id="loaderdiv">
+        <blur-background></blur-background>
+        <div id="loader"></div>
+        <p id="loaderText">Check your Settings > API-URI</p>
+      </div>
       <content>
         <div id="addPublication">
           <p>+</p>
diff --git a/Website/style.css b/Website/style.css
index b1ce7d6..5ca0510 100644
--- a/Website/style.css
+++ b/Website/style.css
@@ -148,7 +148,7 @@ content {
 }
 
 #settingsPopup{
-    z-index: 10;
+    z-index: 300;
 }
 
 #settingsPopup popup-content{
@@ -507,4 +507,42 @@ footer-tag-popup::before{
     left: 0;
     bottom: -17px;
     border-radius: 0 0 0 5px;
+}
+
+#loaderdiv {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 200;
+}
+
+#loader {
+  border: 16px solid transparent;
+  border-top: 16px solid var(--secondary-color);
+  border-bottom: 16px solid var(--primary-color);
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+  position: absolute;
+  left: calc(50% - 60px);
+  top: calc(50% - 120px);
+  z-index: 201;
+}
+
+#loaderText {
+  position: relative;
+  margin: 0 auto;
+  top: calc(50% + 80px);
+  z-index: 201;
+  text-align: center;
+  color: var(--second-background-color);
+  font-size: 20pt;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
\ No newline at end of file