1.loader-container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}
6
7.loader {
8  display: flex;
9  justify-content: center;
10  align-items: center;
11  position: relative;
12  transform: rotate(45deg);
13}
14
15.loader-inner {
16  position: absolute;
17  width: 0.5rem;
18  height: 0.5rem;
19  border-radius: 50%;
20  background-color: #db3434;
21  animation: loader_05101 1.2s linear infinite;
22}
23
24.loader-inner:nth-child(1) {
25  top: 0;
26  left: 0;
27  animation-delay: 0s;
28}
29
30.loader-inner:nth-child(2) {
31  top: 0;
32  left: 1.5rem;
33  animation-delay: 0.1s;
34}
35
36.loader-inner:nth-child(3) {
37  top: 0;
38  left: 3rem;
39  animation-delay: 0.2s;
40}
41
42.loader-inner:nth-child(4) {
43  top: 1.5rem;
44  left: 0;
45  animation-delay: 0.3s;
46}
47
48.loader-inner:nth-child(5) {
49  top: 1.5rem;
50  left: 1.5rem;
51  animation-delay: 0.4s;
52}
53
54.loader-inner:nth-child(6) {
55  top: 1.5rem;
56  left: 3rem;
57  animation-delay: 0.5s;
58}
59
60.loader-inner:nth-child(7) {
61  top: 3rem;
62  left: 0;
63  animation-delay: 0.6s;
64}
65
66.loader-inner:nth-child(8) {
67  top: 3rem;
68  left: 1.5rem;
69  animation-delay: 0.7s;
70}
71
72.loader-inner:nth-child(9) {
73  top: 3rem;
74  left: 3rem;
75  animation-delay: 0.8s;
76}
77
78@keyframes loader_05101 {
79  0% {
80    transform: scale(0);
81  }
82
83  100% {
84    transform: scale(2);
85    opacity: 0;
86  }
87}
88