dev (#160)

Co-authored-by: sora-ext
Co-authored-by: soraefir
Reviewed-on: #160

src/style/module/load_n_spin.css

@@ -0,0 +1,166 @@
+/**
+ *  LOADING BAR
+ *
+ *  Markup:
+ *  ---------
+ *  <div class="loadingBar"></div>
+ *
+ */
+.loadingBar {
+    height: 6px;
+    left: 0;
+    overflow: hidden;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+}
+
+.loadingBar::before {
+    -webkit-animation: loading 2s linear infinite;
+    animation: loading 2s linear infinite;
+    background-color: #03a9f4;
+    content: "";
+    display: block;
+    height: 6px;
+    left: -300px;
+    position: absolute;
+    width: 300px;
+}
+
+@-webkit-keyframes loading {
+    from {
+        left: -300px;
+        width: 30%;
+    }
+
+    50% {
+        width: 30%;
+    }
+
+    70% {
+        width: 70%;
+    }
+
+    80% {
+        left: 50%;
+    }
+
+    95% {
+        left: 120%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+@keyframes loading {
+    from {
+        left: -300px;
+        width: 30%;
+    }
+
+    50% {
+        width: 30%;
+    }
+
+    70% {
+        width: 70%;
+    }
+
+    80% {
+        left: 50%;
+    }
+
+    95% {
+        left: 120%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.spinner {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    display: block
+}
+
+.spinner:after,
+.spinner:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+    left: 50%;
+    margin: -12px 0 0 -12px;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    border: 3px solid transparent;
+    border-top-color: var(--blue);
+}
+
+.spinner:before {
+    -webkit-animation: spinning 2.4s cubic-bezier(.41, .26, .2, .62);
+    animation: spinning 2.4s cubic-bezier(.41, .26, .2, .62);
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite
+}
+
+.spinner:after {
+    -webkit-animation: spinning 2.4s cubic-bezier(.51, .09, .21, .8);
+    animation: spinning 2.4s cubic-bezier(.51, .09, .21, .8);
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite
+}
+
+@-webkit-keyframes spinning {
+    0% {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    25% {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+
+    75% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spinning {
+    0% {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    50% {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}