1.loader {
2  --dim: 3rem;
3  width: var(--dim);
4  height: var(--dim);
5  position: relative;
6  animation: spin988 2s linear infinite;
7}
8
9.loader .circle {
10  --color: #333;
11  --dim: 1.2rem;
12  width: var(--dim);
13  height: var(--dim);
14  background-color: var(--color);
15  border-radius: 50%;
16  position: absolute;
17}
18
19.loader .circle:nth-child(1) {
20  top: 0;
21  left: 0;
22}
23
24.loader .circle:nth-child(2) {
25  top: 0;
26  right: 0;
27}
28
29.loader .circle:nth-child(3) {
30  bottom: 0;
31  left: 0;
32}
33
34.loader .circle:nth-child(4) {
35  bottom: 0;
36  right: 0;
37}
38
39@keyframes spin988 {
40  0% {
41    transform: scale(1) rotate(0);
42  }
43
44  20%, 25% {
45    transform: scale(1.3) rotate(90deg);
46  }
47
48  45%, 50% {
49    transform: scale(1) rotate(180deg);
50  }
51
52  70%, 75% {
53    transform: scale(1.3) rotate(270deg);
54  }
55
56  95%, 100% {
57    transform: scale(1) rotate(360deg);
58  }
59}