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: 10px;
30  height: 10px;
31  margin: 2px;
32  background-color: #fff;
33  box-shadow: 0 0 20px #fff;
34  animation: loader_562 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
35}
36
37.loader-block:nth-child(1) {
38  animation-delay: 0.1s;
39}
40
41.loader-block:nth-child(2) {
42  animation-delay: 0.2s;
43}
44
45.loader-block:nth-child(3) {
46  animation-delay: 0.3s;
47}
48
49.loader-block:nth-child(4) {
50  animation-delay: 0.4s;
51}
52
53.loader-block:nth-child(5) {
54  animation-delay: 0.5s;
55}
56
57.loader-block:nth-child(6) {
58  animation-delay: 0.6s;
59}
60
61.loader-block:nth-child(7) {
62  animation-delay: 0.7s;
63}
64
65.loader-block:nth-child(8) {
66  animation-delay: 0.8s;
67}
68
69@keyframes loader_562 {
70  0% {
71    transform: scale(1);
72    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
73  }
74
75  20% {
76    transform: scale(1, 2.5);
77    box-shadow: 0 0 50px rgba(255, 255, 255, 0.7);
78  }
79
80  40% {
81    transform: scale(1);
82    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
83  }
84}
85