chore: added number 18 loader

rohit8020 · Oct 5, 2022 · 4c1dc46 · 4c1dc46
1 parent 79fe14a
commit 4c1dc46
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 1 deletion.
diff --git a/index.css b/index.css
@@ -895,6 +895,42 @@ body {
 
 }
 
+/* .............Loader-18............... */
+.loader-18 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 45px;
+}
+
+.loader-placeholder {
+  width: 100%;
+  height: 20px;
+  border: 2px solid #6A0DAD;
+  border-radius: 8px;
+  padding: 2px;
+}
+
+.indicator {
+  position: relative;
+  width: 30px;
+  height: 100%;
+  border-radius: 8px;
+  background-color: #6A0DAD;
+  animation: loader18 1s infinite linear alternate-reverse;
+  margin: 0;
+}
+
+@keyframes loader18 {
+  0%{
+     left: 0px;
+  }
+  100%{
+    left: 130px;
+  }
+}
+
 
 /* .............Loader-nth............... */
 /* add the css for the Loader-nth... */
diff --git a/index.html b/index.html
@@ -232,7 +232,15 @@ <h1>Copy Code</h1>
        </div>
     </div>
 
-
+    <!-- Loader-18 -->
+    <div class="loader-box">
+      <div class="loader-18">
+        <div class="loader-placeholder">
+          <div class="indicator"></div>
+        </div>
+      </div>
+      <a href="#demo-modal" id="18" class="show-code-btn">Show Code</a>
+    </div>
 
     <!-- Loader-n -->
     <!-- <div class="loader-box">

diff --git a/index.js b/index.js
@@ -987,6 +987,57 @@ let codes = [
   .show{
     margin-top: 14rem;
     
+  }
+    `
+  },
+  {
+    id: 18,
+    code:
+    `
+    ##HTML
+    <div class="loader-box">
+      <div class="loader-18">
+        <div class="loader-placeholder">
+          <div class="indicator"></div>
+        </div>
+      </div>
+    </div>
+ 
+
+  ##CSS
+  .loader-18 {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 45px;
+  }
+  
+  .loader-placeholder {
+    width: 100%;
+    height: 20px;
+    border: 2px solid #6A0DAD;
+    border-radius: 8px;
+    padding: 2px;
+  }
+  
+  .indicator {
+    position: relative;
+    width: 30px;
+    height: 100%;
+    border-radius: 8px;
+    background-color: #6A0DAD;
+    animation: loader18 1s infinite linear alternate-reverse;
+    margin: 0;
+  }
+  
+  @keyframes loader18 {
+    0%{
+       left: 0px;
+    }
+    100%{
+      left: 130px;
+    }
   }
     `
   }