Add: loader animation

Author: jessicarush

css_loader/base.css

@@ -68,6 +68,59 @@ html {
 }
 
 
+
+.loader-wrapper {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+}
+
+.loader-animation {
+  margin: 100px auto 0;
+  width: 50px;
+  text-align: center;
+}
+
+.loader-animation > div {
+  width: 10px;
+  height: 10px;
+  background-color: #333;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: loader-bounce 1.4s infinite ease-in-out both;
+  animation: loader-bounce 1.4s infinite ease-in-out both;
+}
+
+.loader-animation .bounce1 {
+  -webkit-animation-delay: -.32s;
+  animation-delay: -.32s;
+}
+
+.loader-animation .bounce2 {
+  -webkit-animation-delay: -.16s;
+  animation-delay: -.16s;
+}
+
+@-webkit-keyframes loader-bounce {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1) }
+}
+
+@keyframes loader-bounce {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+
+
+
 /* COSMETIC --------------------------------------------------------------- */
 
 /* UTILITY ---------------------------------------------------------------- */

css_loader/index.html

@@ -23,6 +23,14 @@ <h1 class="primary-heading">CSS Loader Animation</h1>
       <div class="bouncing-loader__ball"></div>
     </div>
 
+  <div class="loader-wrapper">
+    <div class="loader-animation">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+  </div>
+
   </main>
 
   <footer>