Merge pull request rohit8020#50 from davejane25/main

Added 29th Loader

Author: rohit8020

index.css

@@ -1639,5 +1639,64 @@ body {
   }
 } 
 
+
+
+/* .............Loader-29th............... */
+
+.loader-29 {
+  height: 90vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0);
+}
+.wave {
+  width: 5px;
+  height: 90px;
+  background: linear-gradient(45deg, rgb(0, 190, 211), rgb(0, 0, 0));
+  margin: 10px;
+  animation: wave 1s linear infinite;
+  border-radius: 20px;
+}
+.wave:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.wave:nth-child(3) {
+  animation-delay: 0.2s;
+}
+.wave:nth-child(4) {
+  animation-delay: 0.3s;
+}
+.wave:nth-child(5) {
+  animation-delay: 0.4s;
+}
+.wave:nth-child(6) {
+  animation-delay: 0.5s;
+}
+.wave:nth-child(7) {
+  animation-delay: 0.6s;
+}
+.wave:nth-child(8) {
+  animation-delay: 0.7s;
+}
+.wave:nth-child(9) {
+  animation-delay: 0.8s;
+}
+.wave:nth-child(10) {
+  animation-delay: 0.9s;
+}
+
+@keyframes wave {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
 /* .............Loader-nth............... */
 /* add the css for the Loader-nth... */

index.html

@@ -386,6 +386,22 @@ <h1>Copy Code</h1>
         <a href="#demo-modal" id="28" class="show-code-btn">Show Code</a>
       </div>
 
+            <!-- Loader-29 -->
+            <div class="loader-box">
+              <div class="loader-29">
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+              </div>
+              <a href="#demo-modal" id="29" class="show-code-btn">Show Code</a>
+            </div>
 
 
       <!-- Loader-n -->

index.js

@@ -1739,6 +1739,82 @@ let codes = [
         
         `,
   },
+
+  {
+    id: 29,
+    code: `
+    ##HTML
+    <div class="loader-29">
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+              </div>
+
+    ##CSS
+    .loader-29 {
+      height: 90vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0, 0, 0, 0);
+    }
+    .wave {
+      width: 5px;
+      height: 90px;
+      background: linear-gradient(45deg, rgb(0, 190, 211), rgb(0, 0, 0));
+      margin: 10px;
+      animation: wave 1s linear infinite;
+      border-radius: 20px;
+    }
+    .wave:nth-child(2) {
+      animation-delay: 0.1s;
+    }
+    .wave:nth-child(3) {
+      animation-delay: 0.2s;
+    }
+    .wave:nth-child(4) {
+      animation-delay: 0.3s;
+    }
+    .wave:nth-child(5) {
+      animation-delay: 0.4s;
+    }
+    .wave:nth-child(6) {
+      animation-delay: 0.5s;
+    }
+    .wave:nth-child(7) {
+      animation-delay: 0.6s;
+    }
+    .wave:nth-child(8) {
+      animation-delay: 0.7s;
+    }
+    .wave:nth-child(9) {
+      animation-delay: 0.8s;
+    }
+    .wave:nth-child(10) {
+      animation-delay: 0.9s;
+    }
+    
+    @keyframes wave {
+      0% {
+        transform: scale(0);
+      }
+      50% {
+        transform: scale(1);
+      }
+      100% {
+        transform: scale(0);
+      }
+    } 
+        
+        `,
+  },
 ];
 
 //There is no need to touch below code, You just have add you loader code inside the codes array