Loader by StealthWorm

1.loader {
2  display: flex;
3  position: relative;
4  justify-items: center;
5  align-items: center;
6  gap: 1rem;
7  height: 55px;
8  width: 200px;
9  overflow: hidden;
10}
11
12.container {
13  width: 100%;
14  display: flex;
15  flex-direction: column;
16  height: 200px;
17  position: relative;
18  align-items: center;
19}
20
21.carousel {
22  display: flex;
23  gap: 1rem;
24  flex-direction: column;
25  position: absolute;
26  width: 100%;
27  transform-origin: center;
28  animation-delay: 2s;
29}
30
31.loader .container:nth-child(3) {
32  justify-content: flex-start;
33  justify-items: flex-start;
34  animation: scroll-up 4s infinite ease-in-out;
35  animation-delay: 3s;
36}
37
38.loader .container:nth-child(2) {
39  justify-content: flex-end;
40  justify-items: flex-end;
41  animation: scroll-down 4s infinite ease-in-out;
42  animation-delay: 3s;
43}
44
45.loader .container:nth-child(1) {
46  justify-content: flex-end;
47  justify-items: flex-end;
48  animation: scroll-down 3s infinite ease-in-out;
49  animation-delay: 3s;
50}
51
52.love {
53  background: red;
54  display: flex;
55  width: 30px;
56  height: 30px;
57  position: relative;
58  align-items: center;
59  justify-content: center;
60  left: 8px;
61  margin: 0.8rem 4px;
62  transform: rotate(45deg);
63  animation-delay: 2s;
64}
65
66.love::before, .love::after {
67  content: '';
68  position: absolute;
69  width: 30px;
70  height: 30px;
71  border-radius: 50%;
72  background: red;
73}
74
75.love::before {
76  left: -16px;
77}
78
79.love::after {
80  top: -16px;
81}
82
83.death {
84  display: flex;
85  width: 100%;
86  height: 55px;
87  position: relative;
88  align-items: center;
89  justify-content: center;
90  animation: rotation 3s infinite ease-in-out;
91  animation-delay: 1s;
92}
93
94.death:after {
95  content: '';
96  height: 63px;
97  position: absolute;
98  border-left: 12px solid red;
99  transform: rotate(45deg);
100  border-radius: 8px;
101  top: -4px;
102}
103
104.death:before {
105  content: '';
106  height: 60px;
107  position: absolute;
108  border-left: 12px solid red;
109  transform: rotate(-45deg);
110}
111
112.loader:hover {
113  animation: none;
114}
115
116.robots {
117  display: flex;
118  width: 100%;
119  height: 55px;
120  justify-content: space-between;
121  background-color: #ff0000;
122  border-radius: 0 8px 8px;
123  padding: 8px;
124  animation-delay: 5s;
125}
126
127.robots::after {
128  content: '';
129  width: 12px;
130  height: 12px;
131  top: 0;
132  left: 0;
133  background-color: #ffffff;
134  border-radius: 50%;
135  animation-delay: 2s;
136  animation: blink 0.5s 2 forwards;
137}
138
139.robots::before {
140  content: '';
141  width: 12px;
142  height: 12px;
143  top: 0;
144  left: 0;
145  background-color: #ffffff;
146  border-radius: 50%;
147  animation-delay: 2s;
148  animation: blink 0.5s 2 forwards;
149}
150
151@keyframes scroll-up {
152  0% {
153    transform: translateY(0);
154    filter: blur(0);
155  }
156
157  30% {
158    transform: translateY(-150%);
159    filter: blur(10px);
160  }
161
162  60% {
163    transform: translateY(0);
164    filter: blur(0px);
165  }
166}
167
168@keyframes scroll-down {
169  0% {
170    transform: translateY(0);
171    filter: blur(0);
172  }
173
174  30% {
175    transform: translateY(150%);
176    filter: blur(10px);
177  }
178
179  60% {
180    transform: translateY(0);
181    filter: blur(0px);
182  }
183}
184
185@keyframes rotation {
186  20%, 100% {
187    transform: rotate(180deg);
188  }
189}
190
191@keyframes blink {
192  0% {
193    height: 0;
194  }
195
196  20% {
197    height: 12px;
198  }
199
200  100% {
201    height: 12px;
202  }
203}