Merge pull request rohit8020#7 from abhaygupta08/main

build/loader-4

Author: rohit8020

index.css

@@ -197,13 +197,7 @@ footer .footer{
     }
 }
 
-
-
-
-
-/* .............Loader-nth............... */
-/* add the css for the Loader-nth... */
-
+/* Loader-3 */
 
 .black
 {
@@ -259,4 +253,59 @@ footer .footer{
     z-index: 1;
     background: linear-gradient(45deg,transparent,transparent 40%,#e5f403);
     filter: blur(30px);
-}
+}
+
+/* ...............Loader-4................. */
+.loader-4{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    height: 120px;
+}
+.dot-loader {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background-color: black;
+    position: relative;
+    -webkit-animation: 1.2s grow ease-in-out infinite;
+    animation: 1.2s grow ease-in-out infinite;
+  }
+  
+  .dot-loader--2 {
+    -webkit-animation: 1.2s grow ease-in-out infinite 0.15555s;
+    animation: 1.2s grow ease-in-out infinite 0.15555s;
+    margin: 0 20px;
+  }
+  .dot-loader--3 {
+    -webkit-animation: 1.2s grow ease-in-out infinite 0.3s;
+    animation: 1.2s grow ease-in-out infinite 0.3s;
+  }
+  @-webkit-keyframes grow {
+    0%, 40%, 100% {
+      -webkit-transform: scale(0);
+              transform: scale(0);
+    }
+    40% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+    }
+  }
+  @keyframes grow {
+    0%, 40%, 100% {
+      -webkit-transform: scale(0);
+              transform: scale(0);
+    }
+    40% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+    }
+  }
+  
+  
+
+/* .............Loader-nth............... */
+/* add the css for the Loader-nth... */
+
+

index.html

@@ -51,16 +51,32 @@ <h1>Copy Code</h1>
         <a href="#demo-modal" id="2" class="show-code-btn">Show Code</a>
       </div>
 
+
+      <!-- Loader-3 -->
+      <div class="loader-box black">
+        <div class="loader"></div>
+        <a href="#demo-modal" id="3" class="show-code-btn .white">Show Code</a>
+      </div>
+
+      <!-- Loader-4 -->
+      <div class="loader-box">
+        <div class="loader-4">
+            
+          <div class="dot-loader"></div>
+          <div class="dot-loader dot-loader--2"></div>
+          <div class="dot-loader dot-loader--3"></div>      
+
+        </div>
+        <a href="#demo-modal" id="4" class="show-code-btn">Show Code</a>
+      </div>
+
+
       <!-- Loader-n -->
       <!-- 
         You can add the loader HTML code here and add the css code inside the 
         index.css file
 
       -->
-      <div class="loader-box black">
-        <div class="loader"></div>
-        <a href="#demo-modal" id="3" class="show-code-btn .white">Show Code</a>
-      </div>
       <div class="loader-box">More to add...</div>
 
       <!-- Loader -->

index.js

@@ -164,6 +164,66 @@ let codes = [
             }
             `
     },
+    {
+        id : 4,
+        code : `/* Loader-4 */
+        #HTML
+        <div class="loader-4">
+            
+        <div class="dot-loader"></div>
+        <div class="dot-loader dot-loader--2"></div>
+        <div class="dot-loader dot-loader--3"></div>      
+
+      </div>
+      #CSS
+      .loader-4{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 120px;
+        height: 120px;
+    }
+    .dot-loader {
+        height: 20px;
+        width: 20px;
+        border-radius: 50%;
+        background-color: black;
+        position: relative;
+        -webkit-animation: 1.2s grow ease-in-out infinite;
+        animation: 1.2s grow ease-in-out infinite;
+      }
+      
+      .dot-loader--2 {
+        -webkit-animation: 1.2s grow ease-in-out infinite 0.15555s;
+        animation: 1.2s grow ease-in-out infinite 0.15555s;
+        margin: 0 20px;
+      }
+      .dot-loader--3 {
+        -webkit-animation: 1.2s grow ease-in-out infinite 0.3s;
+        animation: 1.2s grow ease-in-out infinite 0.3s;
+      }
+      @-webkit-keyframes grow {
+        0%, 40%, 100% {
+          -webkit-transform: scale(0);
+                  transform: scale(0);
+        }
+        40% {
+          -webkit-transform: scale(1);
+                  transform: scale(1);
+        }
+      }
+      @keyframes grow {
+        0%, 40%, 100% {
+          -webkit-transform: scale(0);
+                  transform: scale(0);
+        }
+        40% {
+          -webkit-transform: scale(1);
+                  transform: scale(1);
+        }
+      }    
+`,
+    }
 ];