Loader by zombie223

1.lds-spinner {
2  color: official;
3  display: inline-block;
4  position: relative;
5  width: 80px;
6  height: 80px;
7}
8
9.lds-spinner div {
10  transform-origin: 40px 40px;
11  animation: lds-spinner 1.2s linear infinite;
12}
13
14.lds-spinner div:after {
15  content: " ";
16  display: block;
17  position: absolute;
18  top: 3px;
19  left: 37px;
20  width: 6px;
21  height: 18px;
22  border-radius: 20%;
23  animation: color_5881 1.2s ease-in-out infinite;
24}
25
26.lds-spinner div:nth-child(1) {
27  transform: rotate(0deg);
28  animation-delay: -1.1s;
29}
30
31.lds-spinner div:nth-child(2) {
32  transform: rotate(30deg);
33  animation-delay: -1s;
34}
35
36.lds-spinner div:nth-child(3) {
37  transform: rotate(60deg);
38  animation-delay: -0.9s;
39}
40
41.lds-spinner div:nth-child(4) {
42  transform: rotate(90deg);
43  animation-delay: -0.8s;
44}
45
46.lds-spinner div:nth-child(5) {
47  transform: rotate(120deg);
48  animation-delay: -0.7s;
49}
50
51.lds-spinner div:nth-child(6) {
52  transform: rotate(150deg);
53  animation-delay: -0.6s;
54}
55
56.lds-spinner div:nth-child(7) {
57  transform: rotate(180deg);
58  animation-delay: -0.5s;
59}
60
61.lds-spinner div:nth-child(8) {
62  transform: rotate(210deg);
63  animation-delay: -0.4s;
64}
65
66.lds-spinner div:nth-child(9) {
67  transform: rotate(240deg);
68  animation-delay: -0.3s;
69}
70
71.lds-spinner div:nth-child(10) {
72  transform: rotate(270deg);
73  animation-delay: -0.2s;
74}
75
76.lds-spinner div:nth-child(11) {
77  transform: rotate(300deg);
78  animation-delay: -0.1s;
79}
80
81.lds-spinner div:nth-child(12) {
82  transform: rotate(330deg);
83  animation-delay: 0s;
84}
85
86.lds-spinner div:nth-child(1)::after {
87  transform: rotate(0deg);
88  animation-delay: -1.1s;
89}
90
91.lds-spinner div:nth-child(2)::after {
92  transform: rotate(30deg);
93  animation-delay: -1s;
94}
95
96.lds-spinner div:nth-child(3)::after {
97  transform: rotate(60deg);
98  animation-delay: -0.9s;
99}
100
101.lds-spinner div:nth-child(4)::after {
102  transform: rotate(90deg);
103  animation-delay: -0.8s;
104}
105
106.lds-spinner div:nth-child(5)::after {
107  transform: rotate(120deg);
108  animation-delay: -0.7s;
109}
110
111.lds-spinner div:nth-child(6)::after {
112  transform: rotate(150deg);
113  animation-delay: -0.6s;
114}
115
116.lds-spinner div:nth-child(7)::after {
117  transform: rotate(180deg);
118  animation-delay: -0.5s;
119}
120
121.lds-spinner div:nth-child(8)::after {
122  transform: rotate(210deg);
123  animation-delay: -0.4s;
124}
125
126.lds-spinner div:nth-child(9)::after {
127  transform: rotate(240deg);
128  animation-delay: -0.3s;
129}
130
131.lds-spinner div:nth-child(10)::after {
132  transform: rotate(270deg);
133  animation-delay: -0.2s;
134}
135
136.lds-spinner div:nth-child(11)::after {
137  transform: rotate(300deg);
138  animation-delay: -0.1s;
139}
140
141.lds-spinner div:nth-child(12)::after {
142  transform: rotate(330deg);
143  animation-delay: 0s;
144}
145
146@keyframes lds-spinner {
147  0% {
148    opacity: 1;
149  }
150
151  100% {
152    opacity: 0;
153  }
154}
155
156@keyframes color_5881 {
157  0% {
158    background-color: rgb(86, 255, 7);
159  }
160
161  25% {
162    background-color: rgb(0, 247, 255);
163  }
164
165  50% {
166    background-color: rgb(86, 255, 7);
167  }
168
169  75% {
170    background-color: rgb(0, 247, 255);
171  }
172
173  100% {
174    background-color: rgb(86, 255, 7);
175  }
176}