Merge pull request #102 from 0x4007/feat/spinner

Feat/spinner
ubiquity · Oct 3, 2024 · 831e182 · 831e182
2 parents 01e6275 + e946d0a
commit 831e182
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 0 deletions.
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -732,6 +732,7 @@
     font-size: 12px;
     color: #000000;
     text-decoration: none;
+    display: inline-block;
   }
   #bottom-right a:hover {
     opacity: 1;
@@ -742,4 +743,34 @@
   #bottom-right:hover svg {
     fill: #000000;
   }
+
+  #issues-container::after {
+    content: "";
+    display: block;
+    width: 48px;
+    height: 48px;
+    border: 4px solid #00000040;
+    border-top: 4px solid #000000;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    top: calc(50vh - 48px);
+    position: fixed;
+    opacity: 1;
+    transition: 0.5s all ease-in-out;
+    right: calc(50% - 48px);
+    filter: blur(0px);
+    pointer-events: none;
+  }
+  #issues-container.ready::after {
+    opacity: 0;
+    filter: blur(8px);
+  }
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -743,4 +743,34 @@
   #bottom-right:hover svg {
     fill: #ffffff;
   }
+
+  #issues-container::after {
+    content: "";
+    display: block;
+    width: 48px;
+    height: 48px;
+    border: 4px solid #ffffff40;
+    border-top: 4px solid #ffffff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    top: calc(50vh - 48px);
+    position: fixed;
+    opacity: 1;
+    transition: 0.5s all ease-in-out;
+    right: calc(50% - 48px);
+    filter: blur(0px);
+    pointer-events: none;
+  }
+  #issues-container.ready::after {
+    opacity: 0;
+    filter: blur(8px);
+  }
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 }