Add: triple-spinner

jessicarush · Apr 12, 2022 · ffe0db2 · ffe0db2
1 parent 64c7cc6
commit ffe0db2
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 15 deletions.
diff --git a/css_spinner/base.css b/css_spinner/base.css
@@ -1,7 +1,6 @@
 @charset "UTF-8";
 
 
-
 /* VARIABLES -------------------------------------------------------------- */
 
 :root {
@@ -14,8 +13,6 @@
   --emphasis-color: rgb(27,211,165);
 }
 
-
-
 /* DEFAULTS --------------------------------------------------------------- */
 
 html {
@@ -34,12 +31,21 @@ html {
   font-weight: 400;
 }
 
-
 /* LINKS & BUTTONS -------------------------------------------------------- */
 
 /* LAYOUT ----------------------------------------------------------------- */
 
-/* COMPONENTS ------------------------------------------------------------- */
+/* ring spinner ----------------------------------------------------------- */
+
+.ring {
+  display: inline-block;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: var(--emphasis-color);
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  animation: ring-spin 1.2s linear infinite;
+}
 
 @keyframes ring-spin {
   0% {
@@ -50,20 +56,68 @@ html {
   }
 }
 
-.ring {
-  display: inline-block;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: var(--emphasis-color);
+/* triple spinner ---------------------------------------------------------- */
+
+.triple-spinner {
+  display: block;
+  position: relative;
+  width: 75px;
+  height: 75px;
   border-radius: 50%;
-  width: 25px;
-  height: 25px;
-  animation: ring-spin 1.2s linear infinite;
+  border: 3px solid transparent;
+  border-top: 3px solid #FF5722;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
 }
 
+.triple-spinner::before,
+.triple-spinner::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  border: 3px solid transparent;
+}
 
+.triple-spinner::before {
+  top: 5px;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  border-top-color: #FF9800;
+  -webkit-animation: spin 3s linear infinite;
+  animation: spin 3.5s linear infinite;
+}
 
-/* COSMETIC --------------------------------------------------------------- */
+.triple-spinner::after {
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+  border-top-color: #FFC107;
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.75s linear infinite;
+}
 
-/* UTILITY ---------------------------------------------------------------- */
+@-webkit-keyframes spin {
+    from {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+
+@keyframes spin {
+    from {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
 
-/* STATE ------------------------------------------------------------------ */
diff --git a/css_spinner/index.html b/css_spinner/index.html
@@ -18,6 +18,7 @@ <h1 class="primary-heading">CSS Spinner Animation</h1>
   <main>
 
     <div class="ring"></div>
+    <div class="triple-spinner"></div>
 
   </main>
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ <h1 class="primary-heading">CSS Spinner Animation</h1> @@
       <main>
         <div class="ring"></div>
+        <div class="triple-spinner"></div>
       </main>
@@ Expand Down @@