Feat(CSS & HTML) Added loader

ViktorSvertoka · Nov 6, 2023 · 9f0f32f · 9f0f32f
1 parent df78521
commit 9f0f32f
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 76 deletions.
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -248,81 +248,6 @@ body {
   background-color: var(--ss-primary-color);
 }
 
-.spinner {
-  transform: rotateZ(45deg);
-  perspective: 1000px;
-  border-radius: 50%;
-  width: 75px;
-  height: 75px;
-  color: #00bfff;
-}
-
-.spinner:before,
-.spinner:after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: inherit;
-  height: inherit;
-  border-radius: 50%;
-  transform: rotateX(70deg);
-  animation: 1s spin linear infinite;
-}
-
-.spinner:after {
-  color: #f0e68c;
-  transform: rotateY(70deg);
-  animation-delay: 0.4s;
-}
-
-@keyframes rotate {
-  0% {
-    transform: translate(-50%, -50%) rotateZ(0deg);
-  }
-  100% {
-    transform: translate(-50%, -50%) rotateZ(360deg);
-  }
-}
-
-@keyframes rotateccw {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  100% {
-    transform: translate(-50%, -50%) rotate(-360deg);
-  }
-}
-
-@keyframes spin {
-  0%,
-  100% {
-    box-shadow: 0.2em 0px 0 0px currentcolor;
-  }
-  12% {
-    box-shadow: 0.2em 0.2em 0 0 currentcolor;
-  }
-  25% {
-    box-shadow: 0 0.2em 0 0px currentcolor;
-  }
-  37% {
-    box-shadow: -0.2em 0.2em 0 0 currentcolor;
-  }
-  50% {
-    box-shadow: -0.2em 0 0 0 currentcolor;
-  }
-  62% {
-    box-shadow: -0.2em -0.2em 0 0 currentcolor;
-  }
-  75% {
-    box-shadow: 0px -0.2em 0 0 currentcolor;
-  }
-  87% {
-    box-shadow: 0.2em -0.2em 0 0 currentcolor;
-  }
-}
-
 @media screen and (max-width: 767px) {
   .wrapper {
     display: flex;
@@ -449,3 +374,79 @@ h1 {
 .primary {
   color: #00bfff90;
 }
+
+.ajax-loader {
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  transform-origin: 50% 50%;
+  transform: rotate(90deg) translate(-50%, 0%);
+  font-size: 50px;
+  width: 1em;
+  height: 3em;
+  color: #ffffff;
+}
+
+.ajax-loader .paw {
+  width: 1em;
+  height: 1em;
+  animation: pawAnimation 2050ms ease-in-out infinite;
+  opacity: 0;
+}
+
+.ajax-loader .paw svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ajax-loader .paw .icon {
+  fill: currentColor;
+}
+
+.ajax-loader .paw:nth-child(odd) {
+  transform: rotate(-10deg);
+}
+
+.ajax-loader .paw:nth-child(even) {
+  transform: rotate(10deg) translate(125%, 0);
+}
+
+.ajax-loader .paw:nth-child(1) {
+  animation-delay: 0.25s;
+}
+
+.ajax-loader .paw:nth-child(2) {
+  animation-delay: 0s;
+}
+
+.ajax-loader .paw:nth-child(3) {
+  animation-delay: -0.25s;
+}
+
+.ajax-loader .paw:nth-child(4) {
+  animation-delay: -0.5s;
+}
+
+.ajax-loader .paw:nth-child(5) {
+  animation-delay: -0.75s;
+}
+
+.ajax-loader .paw:nth-child(6) {
+  animation-delay: -1s;
+}
+
+.ajax-loader .paw.no-cssanimations {
+  opacity: 1;
+}
+
+@keyframes pawAnimation {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/src/index.html b/src/index.html
@@ -59,7 +59,66 @@ <h1>S</h1>
     <p class="loader">Loading data, please wait...</p>
     <p class="error">Oops! Something went wrong! Try reloading the page!</p>
     <div class="cat-info"></div>
-    <span class="spinner"></span>
+
+    <div class="spinner">
+      <svg id="svg-sprite">
+        <symbol id="paw" viewBox="0 0 249 209.32">
+          <ellipse
+            cx="27.917"
+            cy="106.333"
+            stroke-width="0"
+            rx="27.917"
+            ry="35.833"
+          />
+          <ellipse
+            cx="84.75"
+            cy="47.749"
+            stroke-width="0"
+            rx="34.75"
+            ry="47.751"
+          />
+          <ellipse
+            cx="162"
+            cy="47.749"
+            stroke-width="0"
+            rx="34.75"
+            ry="47.751"
+          />
+          <ellipse
+            cx="221.083"
+            cy="106.333"
+            stroke-width="0"
+            rx="27.917"
+            ry="35.833"
+          />
+          <path
+            stroke-width="0"
+            d="M43.98 165.39s9.76-63.072 76.838-64.574c0 0 71.082-6.758 83.096 70.33 0 0 2.586 19.855-12.54 31.855 0 0-15.75 17.75-43.75-6.25 0 0-7.124-8.374-24.624-7.874 0 0-12.75-.125-21.5 6.625 0 0-16.375 18.376-37.75 12.75 0 0-28.29-7.72-19.77-42.86z"
+          />
+        </symbol>
+      </svg>
+
+      <div class="ajax-loader">
+        <div class="paw">
+          <svg class="icon"><use xlink:href="#paw" /></svg>
+        </div>
+        <div class="paw">
+          <svg class="icon"><use xlink:href="#paw" /></svg>
+        </div>
+        <div class="paw">
+          <svg class="icon"><use xlink:href="#paw" /></svg>
+        </div>
+        <div class="paw">
+          <svg class="icon"><use xlink:href="#paw" /></svg>
+        </div>
+        <div class="paw">
+          <svg class="icon"><use xlink:href="#paw" /></svg>
+        </div>
+        <div class="paw">
+          <svg class="icon"><use xlink:href="#paw" /></svg>
+        </div>
+      </div>
+    </div>
 
     <script src="./index.js" type="module"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>