Added CSS 'loader' animation

2022-12-11 15:53:13 -08:00
parent efc8a0d83f
commit 30f72f91ac
3 changed files with 93 additions and 3 deletions
--- a/src/style.css
+++ b/src/style.css
@@ -347,3 +347,55 @@ p {
    color: white;
 }

+#chart-frame {
+    display: flex;
+    flex-direction: column;
+}
+
+
+.lds-ripple {
+    position: relative;
+    align-self: center;
+    width: 80px;
+    height: 80px;
+}
+.lds-ripple div {
+    position: absolute;
+    border: 4px solid #fff;
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+    animation-delay: -0.5s;
+}
+@keyframes lds-ripple {
+    0% {
+        top: 36px;
+        left: 36px;
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+    4.9% {
+        top: 36px;
+        left: 36px;
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+    5% {
+        top: 36px;
+        left: 36px;
+        width: 0;
+        height: 0;
+        opacity: 1;
+    }
+    100% {
+        top: 0px;
+        left: 0px;
+        width: 72px;
+        height: 72px;
+        opacity: 0;
+    }
+}