Added loader-30

Author: muneeb-i-khan

codes.js

@@ -1812,6 +1812,57 @@ const codes = [
           }
         } 
             
+            `,
+      },
+      {
+        id: 30,
+        code: `
+       ##HTML
+       <div class="loader-box">
+        <div class="loader-30">
+          <div class="color"></div>
+        </div>
+        
+        <a href="#demo-modal" id="30" class="show-code-btn">Show Code</a>
+      </div> 
+
+      ##CSS
+      .loader-30{
+        position: relative;
+        height: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 50%;
+        border: 10px solid lightblue;
+        border-radius: 15px;
+    }
+    .loader-30 .color{
+        position: absolute;
+        background-color: whitesmoke;
+        width: 0px;
+        height: 10px;
+        border-radius: 15px;
+        animation: progres 4s infinite linear;    
+    }
+    @keyframes progres{
+        0%{
+          width: 0%;
+        }
+        25%{
+            width: 50%;
+        }
+        50%{
+            width: 75%;
+        }
+        75%{
+            width: 85%;
+        }
+        100%{
+            width: 100%;
+        }
+    };
+    
             `,
       },
 ];

index.css

@@ -1721,6 +1721,45 @@ body {
     transform: scale(0);
   }
 }
+/* .............Loader-30th............... */
+
+.loader-30{
+    position: relative;
+    height: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    border: 10px solid skyblue;
+    border-radius: 15px;
+}
+.loader-30 .color{
+    position: absolute;
+    background-color: orange;
+    width: 0px;
+    height: 10px;
+    border-radius: 15px;
+    animation: loader-30 4s infinite linear;    
+}
+@keyframes loader-30{
+    0%{
+      width: 0%;
+    }
+    25%{
+        width: 50%;
+    }
+    50%{
+        width: 75%;
+    }
+    75%{
+        width: 85%;
+    }
+    100%{
+        width: 100%;
+    }
+};
+
+
 
 /* .............Loader-nth............... */
 /* add the css for the Loader-nth... */

index.html

@@ -401,7 +401,19 @@ <h1>Copy Code</h1>
               <a href="#demo-modal" id="29" class="show-code-btn">Show Code</a>
             </div>
 
+       <!-- Loader-30 -->
+       <div class="loader-box">
+        <div class="loader-30">
+          <div class="color"></div>
+        </div>
+        
+        <a href="#demo-modal" id="30" class="show-code-btn">Show Code</a>
+      </div> 
+      
 
+
+
+
       <!-- Loader-n -->
       <!-- <div class="loader-box">
         <div class="loader-n">