add animation if log empty

Kry9toN · Jan 25, 2021 · c8b7c4b · c8b7c4b
1 parent ffc9c72
commit c8b7c4b
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 1 deletion.
diff --git a/views/css/style.css b/views/css/style.css
@@ -81,3 +81,59 @@ footer {
         font-size: 3rem;
     }
 }
+
+.log {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.log div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: red;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.log div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.log div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.log div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.log div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
diff --git a/views/index.ejs b/views/index.ejs
@@ -31,7 +31,7 @@
         <!-- ULTIME  -->
         <div class="uptime">Uptime:</div>
         <label class="log-label">Bot command log realtime: </label>
-        <div class="log"></div>
+        <div class="log"><div></div><div></div><div></div><div></div></div>
     </div>
 
     <footer>KryPtoN 😎 ©2021</footer>