Added a groovy loader

rohit8020 · Oct 4, 2022 · f61852f · f61852f
1 parent 97232d8
commit f61852f
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 2 deletions.
diff --git a/index.css b/index.css
@@ -549,7 +549,27 @@ footer .footer {
         transform: rotate(1800deg);
     }
 }
-
-
+/* .............Loader-9............... */
+.loader-9{
+    height: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    background: rebeccapurple;
+}
+.loader9{
+    border: 7px groove rebeccapurple;
+
+    display: table-cell;
+    border-radius: 999px;
+    animation: spin 15s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg) }
+    to { transform: rotate(360deg) }
+  }
+
 /* .............Loader-nth............... */
 /* add the css for the Loader-nth... */
diff --git a/index.html b/index.html
@@ -104,6 +104,32 @@ <h1>Copy Code</h1>
       </div>
       <a href="#demo-modal" id="8" class="show-code-btn">Show Code</a>
     </div>
+
+    <!-- Loader-9-->
+    <div class="loader-box">
+      <div class="loader-9">
+        <div class="loader9">
+          <div class="loader9">
+            <div class="loader9">
+              <div class="loader9">
+                <div class="loader9">
+                  <div class="loader9">
+                    <div class="loader9">
+                      <div class="loader9">
+                        <div class="loader9">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a href="#demo-modal" id="9" class="show-code-btn">Show Code</a>
+    </div>
+
     <!-- Loader-n -->
     <!-- <div class="loader-box">
         <div class="loader-n">

diff --git a/index.js b/index.js
@@ -505,6 +505,57 @@ let codes = [
           }
       }
       `
+    },
+
+    {
+      id:9,
+      code:`
+      ##HTML
+      <div class="loader-9">
+        <div class="loader9">
+          <div class="loader9">
+            <div class="loader9">
+              <div class="loader9">
+                <div class="loader9">
+                  <div class="loader9">
+                    <div class="loader9">
+                      <div class="loader9">
+                        <div class="loader9">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      ##CSS
+
+      .loader-9{
+        height: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        background: rebeccapurple;
+      }
+      .loader9{
+          border: 7px groove rebeccapurple;
+        
+          display: table-cell;
+          border-radius: 999px;
+          animation: spin 15s linear infinite;
+        }
+        
+        @keyframes spin {
+          from { transform: rotate(0deg) }
+          to { transform: rotate(360deg) }
+        }
+      
+      `
     }
 ];