Loader by Yogeshawghad0477

1#div1 {
2  width: 100%;
3  background: transparent;
4
5  display: flex;
6  align-items: center;
7  justify-content: center;
8}
9
10@keyframes animateHeight {
11  0% {
12    height: 0px;
13  }
14  50% {
15    height: 50px;
16  }
17}
18
19#l,
20#m {
21  width: 150px;
22  height: 70px;
23  position: relative;
24  overflow: hidden;
25  background-color: black;
26  border-radius: 0px 200px 0px 200px;
27  -moz-border-radius: 0px 200px 0px 200px;
28  -webkit-border-radius: 0px 200px 0px 200px;
29  border: 1px solid transparent;
30  animation: animateHeight 1s infinite alternate-reverse;
31}
32#m {
33  border-radius: 200px 0px 200px 0px;
34  -moz-border-radius: 200px 0px 200px 0px;
35  -webkit-border-radius: 200px 0px 200px 0px;
36}
37.pupil,
38.pupl2,
39.pupil3,
40.pupil4,
41.p5 {
42  overflow: hidden;
43  width: 50px;
44  height: 50px;
45  border-radius: 50%;
46  position: absolute;
47  top: 50%;
48  left: 50%;
49  transform: translate(-50%, -50%);
50  background: rgba(0, 0, 0, 0.158);
51}
52.pupil3,
53.pupil4 {
54  width: 18px;
55  height: 3.5px;
56  overflow: visible;
57}
58
59.pupil {
60  width: 60px;
61  height: 60px;
62  background: linear-gradient(
63    rgb(255, 105, 105),
64    rgb(129, 249, 129),
65    rgb(96, 96, 255),
66    rgb(71, 71, 71)
67  );
68}
69.pupl2 {
70  width: 25px;
71  height: 25px;
72  background: linear-gradient(
73    rgb(255, 2, 2),
74    rgb(0, 255, 0),
75    rgb(0, 0, 255),
76    rgb(0, 0, 0)
77  );
78}
79.p5 {
80  width: 42px;
81  height: 42px;
82  background: linear-gradient(
83    rgb(252, 71, 71),
84    rgb(70, 249, 70),
85    rgb(63, 63, 254),
86    rgb(48, 47, 47)
87  );
88}
89.pupil3 {
90  width: 5px;
91  height: 18px;
92}
93