1.lds-spinner {
2  height: 250px;
3  width: 250px;
4  display: flex;
5  justify-content: center;
6  align-items: center;
7  padding-right: 50px;
8  padding-bottom: 20px;
9}
10
11.lds-spinner div {
12  transform-origin: 30px 20px;
13}
14
15.lds-spinner div:after {
16  content: " ";
17  display: block;
18  position: absolute;
19  top: 2px;
20  left: 37px;
21  width: 6px;
22  height: 19px;
23  border-radius: 20%;
24  animation: color 1.2s ease-in-out infinite;
25}
26
27.lds-spinner div:nth-child(1) {
28  transform: rotate(0deg);
29  animation-delay: -1.1s;
30}
31
32.lds-spinner div:nth-child(2) {
33  transform: rotate(30deg);
34  animation-delay: -1s;
35}
36
37.lds-spinner div:nth-child(3) {
38  transform: rotate(60deg);
39  animation-delay: -0.9s;
40}
41
42.lds-spinner div:nth-child(4) {
43  transform: rotate(90deg);
44  animation-delay: -0.8s;
45}
46
47.lds-spinner div:nth-child(5) {
48  transform: rotate(120deg);
49  animation-delay: -0.7s;
50}
51
52.lds-spinner div:nth-child(6) {
53  transform: rotate(150deg);
54  animation-delay: -0.6s;
55}
56
57.lds-spinner div:nth-child(7) {
58  transform: rotate(180deg);
59  animation-delay: -0.5s;
60}
61
62.lds-spinner div:nth-child(8) {
63  transform: rotate(210deg);
64  animation-delay: -0.4s;
65}
66
67.lds-spinner div:nth-child(9) {
68  transform: rotate(240deg);
69  animation-delay: -0.3s;
70}
71
72.lds-spinner div:nth-child(10) {
73  transform: rotate(270deg);
74  animation-delay: -0.2s;
75}
76
77.lds-spinner div:nth-child(11) {
78  transform: rotate(300deg);
79  animation-delay: -0.1s;
80}
81
82.lds-spinner div:nth-child(12) {
83  transform: rotate(330deg);
84  animation-delay: 0s;
85}
86
87.lds-spinner div:nth-child(12)::after {
88  animation-delay: 0s;
89}
90
91.lds-spinner div:nth-child(1)::after {
92  animation-delay: -1.1s;
93}
94
95.lds-spinner div:nth-child(2)::after {
96  animation-delay: -1s;
97}
98
99.lds-spinner div:nth-child(3)::after {
100  animation-delay: -0.9s;
101}
102
103.lds-spinner div:nth-child(4)::after {
104  animation-delay: -0.8s;
105}
106
107.lds-spinner div:nth-child(5)::after {
108  animation-delay: -0.7s;
109}
110
111.lds-spinner div:nth-child(6)::after {
112  animation-delay: -0.6s;
113}
114
115.lds-spinner div:nth-child(7)::after {
116  animation-delay: -0.5s;
117}
118
119.lds-spinner div:nth-child(8)::after {
120  animation-delay: -0.4s;
121}
122
123.lds-spinner div:nth-child(9)::after {
124  animation-delay: -0.3s;
125}
126
127.lds-spinner div:nth-child(10)::after {
128  animation-delay: -0.2s;
129}
130
131.lds-spinner div:nth-child(11)::after {
132  animation-delay: -0.1s;
133}
134
135@keyframes color {
136  0% {
137    background-color: darkcyan;
138  }
139
140  100% {
141    background-color: white;
142  }
143}