fix: code and merged abhishek's PR

rohit8020 · Oct 4, 2022 · 7430882 · 7430882
1 parent 708fcba
commit 7430882
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/index.css b/index.css
@@ -605,5 +605,22 @@ footer .footer {
 }
 
 
+/* ..................Loader-10............. */
+/* .............Loader-9............... */
+.loader-10 {
+    width: 120px;
+    height: 20px;
+    background: linear-gradient(#514b82 0 0) left -40px top 0/40px 100% no-repeat #eee;
+    -webkit-mask:
+      linear-gradient(#000 0 0) top   /100% 5px no-repeat,
+      linear-gradient(#000 0 0) bottom/100% 5px no-repeat,
+      repeating-linear-gradient(90deg,#000 0 5px, #0000 0 20%) left/calc(100% - 5px) 100%;
+    animation: l10 1s infinite linear;
+}
+
+@keyframes l10 {
+  100% {background-position: right -40px top 0}
+}
+
 /* .............Loader-nth............... */
 /* add the css for the Loader-nth... */
diff --git a/index.html b/index.html
@@ -116,6 +116,14 @@ <h1>Copy Code</h1>
       <a href="#demo-modal" id="9" class="show-code-btn">Show Code</a>
     </div>
 
+    <!-- Loader-10 -->
+    <div class="loader-box">
+      <div class="loader-10">
+        <div class="l10"></div>
+      </div>
+      <a href="#demo-modal" id="10" class="show-code-btn">Show Code</a>
+    </div>
+
 
     <!-- Loader-n -->
     <!-- <div class="loader-box">

diff --git a/index.js b/index.js
@@ -572,7 +572,34 @@ let codes = [
           }
       }
       `
+    },
+    {
+      id:10,
+      code:
+      `
+      ##HTML
+      <div class="loader-10">
+        <div class="l10"></div>
+      </div>
+
+      ##CSS
+      .loader-10 {
+        width: 120px;
+        height: 20px;
+        background: linear-gradient(#514b82 0 0) left -40px top 0/40px 100% no-repeat #eee;
+        -webkit-mask:
+          linear-gradient(#000 0 0) top   /100% 5px no-repeat,
+          linear-gradient(#000 0 0) bottom/100% 5px no-repeat,
+          repeating-linear-gradient(90deg,#000 0 5px, #0000 0 20%) left/calc(100% - 5px) 100%;
+        animation: l10 1s infinite linear;
+    }
+    
+    @keyframes l10 {
+      100% {background-position: right -40px top 0}
+    }
+      `
     }
+
 ];
 
 //There is no need to touch below code, You just have add you loader code inside the codes array