Loader by NlghtM4re

1.loader {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  width: 80px;
6  height: 80px;
7  position: relative;
8}
9
10.loader:before {
11  content: "";
12  position: absolute;
13  top: -10px;
14  left: -10px;
15  right: -10px;
16  bottom: -10px;
17  border-radius: 50%;
18}
19
20.loader-inner {
21  display: flex;
22  justify-content: center;
23  align-items: center;
24  position: relative;
25}
26
27.loader-block {
28  display: inline-block;
29  width: 8px;
30  height: 10px;
31  margin: 2px;
32  background-color: rgb(53, 143, 246);
33  box-shadow: 0 0 30px rgb(53, 143, 246);
34  animation: loader 5s infinite;
35}
36
37.loader-block:nth-child(1) {
38  animation-delay: 0.2s;
39}
40
41.loader-block:nth-child(2) {
42  animation-delay: 0.4s;
43}
44
45.loader-block:nth-child(3) {
46  animation-delay: 0.6s;
47}
48
49.loader-block:nth-child(4) {
50  animation-delay: 0.8s;
51}
52
53.loader-block:nth-child(5) {
54  animation-delay: 1s;
55}
56
57.loader-block:nth-child(6) {
58  animation-delay: 1.2s;
59}
60
61.loader-block:nth-child(7) {
62  animation-delay: 1.4s;
63}
64
65.loader-block:nth-child(8) {
66  animation-delay: 1.6s;
67}
68
69.loader-block:nth-child(9) {
70  animation-delay: 1.8s;
71}
72
73.loader-block:nth-child(10) {
74  animation-delay: 2s;
75}
76
77.loader-block:nth-child(11) {
78  animation-delay: 2.2s;
79}
80
81.loader-block:nth-child(12) {
82  animation-delay: 2.4s;
83}
84
85.loader-block:nth-child(13) {
86  animation-delay: 2.6s;
87}
88
89.loader-block:nth-child(14) {
90  animation-delay: 2.8s;
91}
92
93.loader-block:nth-child(15) {
94  animation-delay: 3s;
95}
96
97.loader-block:nth-child(16) {
98  animation-delay: 3.2s;
99}
100
101.loader-block:nth-child(17) {
102  animation-delay: 3.4s;
103}
104
105.loader-block:nth-child(18) {
106  animation-delay: 3.6s;
107}
108
109.loader-block:nth-child(19) {
110  animation-delay: 3.8s;
111}
112
113.loader-block:nth-child(20) {
114  animation-delay: 4s;
115}
116
117.loader-block:nth-child(21) {
118  animation-delay: 4.2s;
119}
120
121.loader-block:nth-child(22) {
122  animation-delay: 4.4s;
123}
124
125.loader-block:nth-child(23) {
126  animation-delay: 4.6s;
127}
128
129.loader-block:nth-child(24) {
130  animation-delay: 4.8s;
131}
132
133@keyframes loader {
134  0% {
135    transform: scale(1);
136    box-shadow: 0 0 40px rgb(53, 143, 246);
137  }
138
139  13% {
140    transform: scale(1, 4);
141    box-shadow: 0 0 60px rgb(53, 143, 246);
142  }
143
144  26% {
145    transform: scale(1);
146    box-shadow: 0 0 40px rgb(53, 143, 246);
147  }
148}
149