1.loader {
2  --cell-size: 52px;
3  --cell-spacing: 1px;
4  --cells: 3;
5  --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
6  display: flex;
7  flex-wrap: wrap;
8  width: var(--total-size);
9  height: var(--total-size);
10}
11
12.cell {
13  flex: 0 0 var(--cell-size);
14  margin: var(--cell-spacing);
15  background-color: transparent;
16  box-sizing: border-box;
17  border-radius: 4px;
18  animation: 1.5s ripple ease infinite;
19}
20
21.cell.d-1 {
22  animation-delay: 100ms;
23}
24
25.cell.d-2 {
26  animation-delay: 200ms;
27}
28
29.cell.d-3 {
30  animation-delay: 300ms;
31}
32
33.cell.d-4 {
34  animation-delay: 400ms;
35}
36
37.cell:nth-child(1) {
38  --cell-color: #00FF87;
39}
40
41.cell:nth-child(2) {
42  --cell-color: #0CFD95;
43}
44
45.cell:nth-child(3) {
46  --cell-color: #17FBA2;
47}
48
49.cell:nth-child(4) {
50  --cell-color: #23F9B2;
51}
52
53.cell:nth-child(5) {
54  --cell-color: #30F7C3;
55}
56
57.cell:nth-child(6) {
58  --cell-color: #3DF5D4;
59}
60
61.cell:nth-child(7) {
62  --cell-color: #45F4DE;
63}
64
65.cell:nth-child(8) {
66  --cell-color: #53F1F0;
67}
68
69.cell:nth-child(9) {
70  --cell-color: #60EFFF;
71}
72
73/*Animation*/
74@keyframes ripple {
75  0% {
76    background-color: transparent;
77  }
78
79  30% {
80    background-color: var(--cell-color);
81  }
82
83  60% {
84    background-color: transparent;
85  }
86
87  100% {
88    background-color: transparent;
89  }
90}