1.loader {
2  --eye: #212121;
3  position: relative;
4  display: flex;
5  align-items: center;
6  justify-content: center;
7}
8
9.loader::before {
10  content: '';
11  position: absolute;
12  top: 0;
13  left: 0;
14  transform: translate(-50%, -50%);
15  border: 5px solid var(--eye);
16  border-radius: 100%;
17  animation: translate-keyframes 2s infinite linear;
18}
19
20.loader span {
21  position: absolute;
22  width: 40px;
23  height: 40px;
24  border-radius: 100%;
25  border-top: 12px solid var(--eye);
26  border-bottom: 5px solid var(--eye);
27  outline: 2px solid var(--eye);
28}
29
30.loader span {
31  animation: rotate-keyframes 2s infinite linear;
32}
33
34@keyframes translate-keyframes {
35  0% {
36    transform: translate(-100%, -50%);
37  }
38
39  95% {
40    transform: translate(50%, -50%);
41  }
42
43  96% {
44    transform: translate(-50%, -50%);
45  }
46
47  100% {
48    transform: translate(-100%, -50%);
49  }
50}
51
52@keyframes rotate-keyframes {
53  90% {
54    height: 40px;
55  }
56
57  95% {
58    height: 0px;
59  }
60
61  100% {
62    height: 40px;
63  }
64}