Loader by ayman-ashine

1.loader {
2  --c-1: #a2ff37;
3  --c-2: #5bb2ff;
4  position: relative;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  animation: kfs-loader 5s infinite ease-in-out;
9}
10
11@keyframes kfs-loader {
12  0% {
13    transform: rotate(5deg) translate(-20px);
14  }
15  50% {
16    transform: rotate(-5deg) translate(20px);
17  }
18  100% {
19    transform: rotate(5deg) translate(-20px);
20  }
21}
22
23.layer {
24  font-size: 25px;
25  font-family: "Segoe UI", Tahoma;
26  font-weight: 800;
27  text-transform: uppercase;
28  position: absolute;
29}
30
31.layer:nth-child(1) {
32  color: var(--c-1);
33  animation: kfs-layer-1 1s infinite ease-in-out;
34}
35
36.layer:nth-child(2) {
37  color: var(--c-2);
38  animation: kfs-layer-2 1s 0.5s infinite ease-in-out;
39}
40
41@keyframes kfs-layer-1 {
42  0% {
43    text-shadow: 0 0 30px var(--c-1);
44    transform: scaleY(0);
45    z-index: 2;
46  }
47  50% {
48    transform: scaleY(1.5);
49    z-index: 2;
50  }
51  100% {
52    transform: scaleY(1.5);
53    z-index: 0;
54  }
55}
56
57@keyframes kfs-layer-2 {
58  0% {
59    text-shadow: 0 0 30px var(--c-2);
60    transform: scaleY(0);
61    z-index: 2;
62  }
63  50% {
64    transform: scaleY(1.5);
65    z-index: 2;
66  }
67  100% {
68    transform: scaleY(1.5);
69    z-index: 0;
70  }
71}
72