update

CSS/style.css

@@ -590,4 +590,83 @@ div.copyright p {
 #light {
       filter: invert(0);
       /* box-shadow: none; */
-}
+}
+
+
+.loader {
+      position: absolute;
+      top: calc(50% - 32px);
+      left: calc(50% - 32px);
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      perspective: 800px;
+  }
+
+  .inner {
+      position: absolute;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+  }
+
+  .inner.one {
+      left: 0%;
+      top: 0%;
+      animation: rotate-one 1s linear infinite;
+      border-bottom: 3px solid #0000fa;
+  }
+
+  .inner.two {
+      right: 0%;
+      top: 0%;
+      animation: rotate-two 1s linear infinite;
+      border-right: 3px solid #ff4d00;
+  }
+
+  .inner.three {
+      right: 0%;
+      bottom: 0%;
+      animation: rotate-three 1s linear infinite;
+      border-top: 3px solid #218702;
+  }
+
+  div.loader p {
+      position: relative;
+      font-weight: 600;
+      letter-spacing: 1px;
+      top: 80px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+  }
+
+  @keyframes rotate-one {
+      0% {
+          transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+      }
+
+      100% {
+          transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+      }
+  }
+
+  @keyframes rotate-two {
+      0% {
+          transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+      }
+
+      100% {
+          transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+      }
+  }
+
+  @keyframes rotate-three {
+      0% {
+          transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+      }
+
+      100% {
+          transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+      }
+  }