From 0088be2c147bbddba1bfc44c8eebbf31542121ff Mon Sep 17 00:00:00 2001
From: Pritesh <pritesh.d.kiri@gmail.com>
Date: Fri, 28 Oct 2022 12:57:24 +0530
Subject: [PATCH]  adding android css loader

---
 codes.js   | 291 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.css  | 272 +++++++++++++++++++++++++++++++++++++++++++++++++
 index.html |  22 ++++
 3 files changed, 585 insertions(+)

diff --git a/codes.js b/codes.js
index 98dbbd2..b5acc17 100644
--- a/codes.js
+++ b/codes.js
@@ -3492,4 +3492,295 @@ const codes = [
     }
     `,
   },
+  {
+    id: 52,
+    code: `
+    ##HTML Code
+    <div class="loader-52">
+    <div class="half-circle"></div>
+    <div class="circle1 circles"></div>
+    <div class="circle2 circles"></div>
+    <div class="antena1"></div>
+    <div class="antena2"></div>
+    <div class="middle"></div>
+    <div class="hand"></div>
+    <div class="hand2"></div>
+    <div class="leg"></div>
+    <div class="leg2"></div>
+  </div>
+
+    ##CSS Code
+   
+.loader-52 {
+  width: 200px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader-52 > .half-circle,
+.loader-52 > .middle,
+.loader-52 > .antena1,
+.loader-52 > .antena2,
+.loader-52 > .leg,
+.loader-52 > .leg2,
+.loader-52 > .hand,
+.loader-52 > .hand2 {
+  background: #00cc33;
+}
+
+.loader-52 > .half-circle {
+  position: relative;
+  top: 35px;
+  width: 70px;
+  height: 150px;
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  border-bottom: 0;
+  animation: half-circle 3s ease-in-out infinite both;
+}
+
+@keyframes half-circle {
+  0% {
+    transform: scale(1) translateY(0px);
+  }
+
+  50% {
+    transform: scale(1.3, 1.1) translateY(0px);
+  }
+
+  100% {
+    transform: scale(1) translateY(0px);
+  }
+}
+
+.loader-52 > .circle1 {
+  position: relative;
+  top: 17px;
+  left: 14px;
+  width: 8px;
+  height: 25px;
+  border-radius: 10px;
+}
+
+.loader-52 > .circle2 {
+  position: relative;
+  top: 12px;
+  right: 13px;
+  width: 8px;
+  height: 25px;
+  border-radius: 10px;
+}
+
+.loader-52 > .circles {
+  animation: eyes 3s ease-in-out infinite both;
+  background-color: white;
+}
+
+@keyframes eyes {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.7, 1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.loader-52 > .antena1,
+.loader-52 > .antena2 {
+  width: 5px;
+  height: 75px;
+  border-radius: 3px;
+  z-index: 1;
+}
+
+.loader-52 > .antena1 {
+  position: relative;
+  left: 35px;
+  bottom: 13px;
+  background: #00cc33;
+  transform: rotate(20deg);
+  animation: antena1 3s ease-in-out infinite both;
+}
+
+.loader-52 > .antena2 {
+  position: relative;
+  right: 35px;
+  bottom: 28px;
+  background: #00cc33;
+  transform: rotate(-20deg);
+  animation: antena2 3s ease-in-out infinite both;
+}
+
+@keyframes antena1 {
+  0% {
+    transform: rotate(20deg);
+  }
+
+  50% {
+    transform: rotate(0deg) translateX(-10px) translateY(-1px);
+  }
+
+  100% {
+    transform: rotate(20deg);
+  }
+}
+
+@keyframes antena2 {
+  0% {
+    transform: rotate(-20deg);
+  }
+
+  50% {
+    transform: rotate(0deg) translateX(10px) translateY(-1px);
+  }
+
+  100% {
+    transform: rotate(-20deg);
+  }
+}
+
+.loader-52 > .middle {
+  position: relative;
+  left: 0px;
+  bottom: 0;
+  width: 70px;
+  height: 205px;
+  background: #00cc33;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  animation: middle 3s ease-in-out infinite both;
+}
+
+@keyframes middle {
+  0% {
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    transform: scale(1);
+  }
+
+  50% {
+    border-bottom-left-radius: 90px;
+    border-bottom-right-radius: 90px;
+    transform: scale(1.3, 1.1) translateY(0px);
+  }
+
+  100% {
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    transform: scale(1);
+  }
+}
+
+.loader-52 > .hand {
+  position: relative;
+  left: 45px;
+  bottom: 50px;
+
+  width: 10px;
+  height: 125px;
+
+  border-radius: 10px;
+  animation: hand1 3s ease-in-out infinite both;
+}
+
+@keyframes hand1 {
+  0% {
+    transform: rotate(0deg) translateX(0px);
+  }
+
+  50% {
+    transform: rotate(-180deg) translateX(10px);
+  }
+
+  100% {
+    transform: rotate(0deg) translateX(0px);
+  }
+}
+
+.loader-52 > .hand2 {
+  position: relative;
+  right: 45px;
+  bottom: 75px;
+  width: 10px;
+  height: 125px;
+
+  border-radius: 10px;
+  animation: hand2 3s ease-in-out infinite both;
+}
+
+@keyframes hand2 {
+  0% {
+    transform: rotate(0deg) translateX(0px);
+  }
+
+  50% {
+    transform: rotate(180deg) translateX(-10px);
+  }
+
+  100% {
+    transform: rotate(0deg) translateX(0px);
+  }
+}
+
+.loader-52 > .leg {
+  position: relative;
+  left: 15px;
+  bottom: 44px;
+  width: 10px;
+  height: 125px;
+
+  border-radius: 10px;
+  transform-origin: top;
+  animation: leg1 3s ease-in-out infinite both;
+}
+
+@keyframes leg1 {
+  0% {
+    transform: rotate(0deg) translateY(0px);
+  }
+
+  50% {
+    transform: rotate(360deg) translateY(-40px);
+  }
+
+  100% {
+    transform: rotate(0deg) translateY(0px);
+  }
+}
+
+.loader-52 > .leg2 {
+  position: relative;
+  right: 15px;
+  bottom: 68px;
+  width: 10px;
+  height: 125px;
+
+  border-radius: 10px;
+  transform-origin: top;
+  animation: leg2 3s ease-in-out infinite both;
+}
+
+@keyframes leg2 {
+  0% {
+    transform: rotate(0deg) translateY(0px);
+  }
+
+  50% {
+    transform: rotate(-360deg) translateY(-40px);
+  }
+
+  100% {
+    transform: rotate(0deg) translateY(0px);
+  }
+}
+    `,
+  },
 ];
diff --git a/index.css b/index.css
index d41b7f0..3b21778 100644
--- a/index.css
+++ b/index.css
@@ -3517,5 +3517,277 @@ body {
   animation-delay: 0s;
 }
 
+/* .............Loader-52th............... */
+
+.loader-52 {
+  width: 200px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader-52 > .half-circle,
+.loader-52 > .middle,
+.loader-52 > .antena1,
+.loader-52 > .antena2,
+.loader-52 > .leg,
+.loader-52 > .leg2,
+.loader-52 > .hand,
+.loader-52 > .hand2 {
+  background: #00cc33;
+}
+
+.loader-52 > .half-circle {
+  position: relative;
+  top: 35px;
+  width: 70px;
+  height: 150px;
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  border-bottom: 0;
+  animation: half-circle 3s ease-in-out infinite both;
+}
+
+@keyframes half-circle {
+  0% {
+    transform: scale(1) translateY(0px);
+  }
+
+  50% {
+    transform: scale(1.3, 1.1) translateY(0px);
+  }
+
+  100% {
+    transform: scale(1) translateY(0px);
+  }
+}
+
+.loader-52 > .circle1 {
+  position: relative;
+  top: 17px;
+  left: 14px;
+  width: 8px;
+  height: 25px;
+  border-radius: 10px;
+}
+
+.loader-52 > .circle2 {
+  position: relative;
+  top: 12px;
+  right: 13px;
+  width: 8px;
+  height: 25px;
+  border-radius: 10px;
+}
+
+.loader-52 > .circles {
+  animation: eyes 3s ease-in-out infinite both;
+  background-color: white;
+}
+
+@keyframes eyes {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.7, 1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.loader-52 > .antena1,
+.loader-52 > .antena2 {
+  width: 5px;
+  height: 75px;
+  border-radius: 3px;
+  z-index: 1;
+}
+
+.loader-52 > .antena1 {
+  position: relative;
+  left: 35px;
+  bottom: 13px;
+  background: #00cc33;
+  transform: rotate(20deg);
+  animation: antena1 3s ease-in-out infinite both;
+}
+
+.loader-52 > .antena2 {
+  position: relative;
+  right: 35px;
+  bottom: 28px;
+  background: #00cc33;
+  transform: rotate(-20deg);
+  animation: antena2 3s ease-in-out infinite both;
+}
+
+@keyframes antena1 {
+  0% {
+    transform: rotate(20deg);
+  }
+
+  50% {
+    transform: rotate(0deg) translateX(-10px) translateY(-1px);
+  }
+
+  100% {
+    transform: rotate(20deg);
+  }
+}
+
+@keyframes antena2 {
+  0% {
+    transform: rotate(-20deg);
+  }
+
+  50% {
+    transform: rotate(0deg) translateX(10px) translateY(-1px);
+  }
+
+  100% {
+    transform: rotate(-20deg);
+  }
+}
+
+.loader-52 > .middle {
+  position: relative;
+  left: 0px;
+  bottom: 0;
+  width: 70px;
+  height: 205px;
+  background: #00cc33;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  animation: middle 3s ease-in-out infinite both;
+}
+
+@keyframes middle {
+  0% {
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    transform: scale(1);
+  }
+
+  50% {
+    border-bottom-left-radius: 90px;
+    border-bottom-right-radius: 90px;
+    transform: scale(1.3, 1.1) translateY(0px);
+  }
+
+  100% {
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    transform: scale(1);
+  }
+}
+
+.loader-52 > .hand {
+  position: relative;
+  left: 45px;
+  bottom: 50px;
+
+  width: 10px;
+  height: 125px;
+
+  border-radius: 10px;
+  animation: hand1 3s ease-in-out infinite both;
+}
+
+@keyframes hand1 {
+  0% {
+    transform: rotate(0deg) translateX(0px);
+  }
+
+  50% {
+    transform: rotate(-180deg) translateX(10px);
+  }
+
+  100% {
+    transform: rotate(0deg) translateX(0px);
+  }
+}
+
+.loader-52 > .hand2 {
+  position: relative;
+  right: 45px;
+  bottom: 75px;
+  width: 10px;
+  height: 125px;
+
+  border-radius: 10px;
+  animation: hand2 3s ease-in-out infinite both;
+}
+
+@keyframes hand2 {
+  0% {
+    transform: rotate(0deg) translateX(0px);
+  }
+
+  50% {
+    transform: rotate(180deg) translateX(-10px);
+  }
+
+  100% {
+    transform: rotate(0deg) translateX(0px);
+  }
+}
+
+.loader-52 > .leg {
+  position: relative;
+  left: 15px;
+  bottom: 44px;
+  width: 10px;
+  height: 125px;
+
+  border-radius: 10px;
+  transform-origin: top;
+  animation: leg1 3s ease-in-out infinite both;
+}
+
+@keyframes leg1 {
+  0% {
+    transform: rotate(0deg) translateY(0px);
+  }
+
+  50% {
+    transform: rotate(360deg) translateY(-40px);
+  }
+
+  100% {
+    transform: rotate(0deg) translateY(0px);
+  }
+}
+
+.loader-52 > .leg2 {
+  position: relative;
+  right: 15px;
+  bottom: 68px;
+  width: 10px;
+  height: 125px;
+
+  border-radius: 10px;
+  transform-origin: top;
+  animation: leg2 3s ease-in-out infinite both;
+}
+
+@keyframes leg2 {
+  0% {
+    transform: rotate(0deg) translateY(0px);
+  }
+
+  50% {
+    transform: rotate(-360deg) translateY(-40px);
+  }
+
+  100% {
+    transform: rotate(0deg) translateY(0px);
+  }
+}
 /* .............Loader-nth............... */
 /* add the css for the Loader-nth... */
diff --git a/index.html b/index.html
index 6732526..a98e285 100644
--- a/index.html
+++ b/index.html
@@ -622,6 +622,28 @@ <h3 class="loader-49-text" data-text="Loading...">Loading...</h3>
         <a href="#demo-modal" id="51" class="show-code-btn">Show Code</a>
       </div>
 
+      <!-- Loader-52 -->
+      <div class="loader-box">
+        <div class="loader-52">
+          <div class="half-circle"></div>
+          <div class="circle1 circles"></div>
+          <div class="circle2 circles"></div>
+          <div class="antena1"></div>
+          <div class="antena2"></div>
+          <div class="middle"></div>
+
+          <div class="hand"></div>
+
+          <div class="hand2"></div>
+
+          <div class="leg"></div>
+
+          <div class="leg2"></div>
+        </div>
+
+        <a href="#demo-modal" id="52" class="show-code-btn">Show Code</a>
+      </div>
+
       <!-- Loader-n -->
       <!-- <div class="loader-box">
         <div class="loader-n">