Loader by Pradeepsaranbishnoi

1.🤚 {
2  --skin-color: #E4C560;
3  --tap-speed: 0.6s;
4  --tap-stagger: 0.1s;
5  position: relative;
6  width: 80px;
7  height: 60px;
8  margin-left: 80px;
9}
10
11.🤚:before {
12  content: '';
13  display: block;
14  width: 180%;
15  height: 75%;
16  position: absolute;
17  top: 70%;
18  right: 20%;
19  background-color: black;
20  border-radius: 40px 10px;
21  filter: blur(10px);
22  opacity: 0.3;
23}
24
25.🌴 {
26  display: block;
27  width: 100%;
28  height: 100%;
29  position: absolute;
30  top: 0;
31  left: 0;
32  background-color: var(--skin-color);
33  border-radius: 10px 40px;
34}
35
36.👍 {
37  position: absolute;
38  width: 120%;
39  height: 38px;
40  background-color: var(--skin-color);
41  bottom: -18%;
42  right: 1%;
43  transform-origin: calc(100% - 20px) 20px;
44  transform: rotate(-20deg);
45  border-radius: 30px 20px 20px 10px;
46  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
47  border-left: 2px solid rgba(0, 0, 0, 0.1);
48}
49
50.👍:after {
51  width: 20%;
52  height: 60%;
53  content: '';
54  background-color: rgba(255, 255, 255, 0.3);
55  position: absolute;
56  bottom: -8%;
57  left: 5px;
58  border-radius: 60% 10% 10% 30%;
59  border-right: 2px solid rgba(0, 0, 0, 0.05);
60}
61
62.👉 {
63  position: absolute;
64  width: 80%;
65  height: 35px;
66  background-color: var(--skin-color);
67  bottom: 32%;
68  right: 64%;
69  transform-origin: 100% 20px;
70  animation-duration: calc(var(--tap-speed) * 2);
71  animation-timing-function: ease-in-out;
72  animation-iteration-count: infinite;
73  transform: rotate(10deg);
74}
75
76.👉:before {
77  content: '';
78  position: absolute;
79  width: 140%;
80  height: 30px;
81  background-color: var(--skin-color);
82  bottom: 8%;
83  right: 65%;
84  transform-origin: calc(100% - 20px) 20px;
85  transform: rotate(-60deg);
86  border-radius: 20px;
87}
88
89.👉:nth-child(1) {
90  animation-delay: 0;
91  filter: brightness(70%);
92  animation-name: tap-upper-1;
93}
94
95.👉:nth-child(2) {
96  animation-delay: var(--tap-stagger);
97  filter: brightness(80%);
98  animation-name: tap-upper-2;
99}
100
101.👉:nth-child(3) {
102  animation-delay: calc(var(--tap-stagger) * 2);
103  filter: brightness(90%);
104  animation-name: tap-upper-3;
105}
106
107.👉:nth-child(4) {
108  animation-delay: calc(var(--tap-stagger) * 3);
109  filter: brightness(100%);
110  animation-name: tap-upper-4;
111}
112
113@keyframes tap-upper-1 {
114  0%, 50%, 100% {
115    transform: rotate(10deg) scale(0.4);
116  }
117
118  40% {
119    transform: rotate(50deg) scale(0.4);
120  }
121}
122
123@keyframes tap-upper-2 {
124  0%, 50%, 100% {
125    transform: rotate(10deg) scale(0.6);
126  }
127
128  40% {
129    transform: rotate(50deg) scale(0.6);
130  }
131}
132
133@keyframes tap-upper-3 {
134  0%, 50%, 100% {
135    transform: rotate(10deg) scale(0.8);
136  }
137
138  40% {
139    transform: rotate(50deg) scale(0.8);
140  }
141}
142
143@keyframes tap-upper-4 {
144  0%, 50%, 100% {
145    transform: rotate(10deg) scale(1);
146  }
147
148  40% {
149    transform: rotate(50deg) scale(1);
150  }
151}
152