1html {
2 height: 100%;
3 background-color: #222;
4
5 background-image:
6 radial-gradient(
7 white 45%,
8 transparent 50%
9 ),
10 radial-gradient(
11 hsla(0,0%,100%,.3) 5%,
12 transparent 10%
13 ),
14 radial-gradient(
15 hsla(0,0%,100%,.4) 10%,
16 transparent 15%
17 ),
18 radial-gradient(
19 hsla(0,0%,100%,.5) 10%,
20 transparent 15%
21 ),
22 radial-gradient(
23 hsla(0,0%,100%,.6) 20%,
24 transparent 25%
25 ),
26 radial-gradient(
27 hsla(0,0%,100%,.7) 20%,
28 transparent 25%
29 ),
30 radial-gradient(
31 hsla(0,0%,100%,.8) 30%,
32 transparent 35%
33 ),
34 radial-gradient(
35 hsla(0,0%,100%,.9) 30%,
36 transparent 35%
37 );
38
39 background-position:
40 50% calc(50% - 20px),
41 calc(50% + 16px) calc(50% - 16px),
42 calc(50% + 24px) 50%,
43 calc(50% + 16px) calc(50% + 16px),
44 50% calc(50% + 24px),
45 calc(50% - 16px) calc(50% + 16px),
46 calc(50% - 24px) 50%,
47 calc(50% - 16px) calc(50% - 16px);
48 background-size: 20px 20px;
49 background-repeat: no-repeat;
50 animation: load-dots 1s linear infinite;
51 }
52
53@keyframes load-dots {
54 12.5% {
55 background-image:
56 radial-gradient(
57 hsla(0,0%,100%,.9) 30%,
58 transparent 35%
59 ),
60 radial-gradient(
61 white 45%,
62 transparent 50%
63 ),
64 radial-gradient(
65 hsla(0,0%,100%,.3) 5%,
66 transparent 10%
67 ),
68 radial-gradient(
69 hsla(0,0%,100%,.4) 10%,
70 transparent 15%
71 ),
72 radial-gradient(
73 hsla(0,0%,100%,.5) 10%,
74 transparent 15%
75 ),
76 radial-gradient(
77 hsla(0,0%,100%,.6) 20%,
78 transparent 25%
79 ),
80 radial-gradient(
81 hsla(0,0%,100%,.7) 20%,
82 transparent 25%
83 ),
84 radial-gradient(
85 hsla(0,0%,100%,.8) 30%,
86 transparent 35%
87 );
88 }
89 25% {
90 background-image:
91 radial-gradient(
92 hsla(0,0%,100%,.8) 30%,
93 transparent 35%
94 ),
95 radial-gradient(
96 hsla(0,0%,100%,.9) 30%,
97 transparent 35%
98 ),
99 radial-gradient(
100 white 45%,
101 transparent 50%
102 ),
103 radial-gradient(
104 hsla(0,0%,100%,.3) 5%,
105 transparent 10%
106 ),
107 radial-gradient(
108 hsla(0,0%,100%,.4) 10%,
109 transparent 15%
110 ),
111 radial-gradient(
112 hsla(0,0%,100%,.5) 10%,
113 transparent 15%
114 ),
115 radial-gradient(
116 hsla(0,0%,100%,.6) 20%,
117 transparent 25%
118 ),
119 radial-gradient(
120 hsla(0,0%,100%,.7) 20%,
121 transparent 25%
122 );
123 }
124 37.5% {
125 background-image:
126 radial-gradient(
127 hsla(0,0%,100%,.7) 20%,
128 transparent 25%
129 ),
130 radial-gradient(
131 hsla(0,0%,100%,.8) 30%,
132 transparent 35%
133 ),
134 radial-gradient(
135 hsla(0,0%,100%,.9) 30%,
136 transparent 35%
137 ),
138 radial-gradient(
139 white 45%,
140 transparent 50%
141 ),
142 radial-gradient(
143 hsla(0,0%,100%,.3) 5%,
144 transparent 10%
145 ),
146 radial-gradient(
147 hsla(0,0%,100%,.4) 10%,
148 transparent 15%
149 ),
150 radial-gradient(
151 hsla(0,0%,100%,.5) 10%,
152 transparent 15%
153 ),
154 radial-gradient(
155 hsla(0,0%,100%,.6) 20%,
156 transparent 25%
157 );
158 }
159 50% {
160 background-image:
161 radial-gradient(
162 hsla(0,0%,100%,.6) 20%,
163 transparent 25%
164 ),
165 radial-gradient(
166 hsla(0,0%,100%,.7) 20%,
167 transparent 25%
168 ),
169 radial-gradient(
170 hsla(0,0%,100%,.8) 30%,
171 transparent 35%
172 ),
173 radial-gradient(
174 hsla(0,0%,100%,.9) 30%,
175 transparent 35%
176 ),
177 radial-gradient(
178 white 45%,
179 transparent 50%
180 ),
181 radial-gradient(
182 hsla(0,0%,100%,.3) 5%,
183 transparent 10%
184 ),
185 radial-gradient(
186 hsla(0,0%,100%,.4) 10%,
187 transparent 15%
188 ),
189 radial-gradient(
190 hsla(0,0%,100%,.5) 10%,
191 transparent 15%
192 );
193 }
194 62.5% {
195 background-image:
196 radial-gradient(
197 hsla(0,0%,100%,.5) 10%,
198 transparent 15%
199 ),
200 radial-gradient(
201 hsla(0,0%,100%,.6) 20%,
202 transparent 25%
203 ),
204 radial-gradient(
205 hsla(0,0%,100%,.7) 20%,
206 transparent 25%
207 ),
208 radial-gradient(
209 hsla(0,0%,100%,.8) 30%,
210 transparent 35%
211 ),
212 radial-gradient(
213 hsla(0,0%,100%,.9) 30%,
214 transparent 35%
215 ),
216 radial-gradient(
217 white 45%,
218 transparent 50%
219 ),
220 radial-gradient(
221 hsla(0,0%,100%,.3) 5%,
222 transparent 10%
223 ),
224 radial-gradient(
225 hsla(0,0%,100%,.4) 10%,
226 transparent 15%
227 );
228 }
229 75% {
230 background-image:
231 radial-gradient(
232 hsla(0,0%,100%,.4) 10%,
233 transparent 15%
234 ),
235 radial-gradient(
236 hsla(0,0%,100%,.5) 10%,
237 transparent 15%
238 ),
239 radial-gradient(
240 hsla(0,0%,100%,.6) 20%,
241 transparent 25%
242 ),
243 radial-gradient(
244 hsla(0,0%,100%,.7) 20%,
245 transparent 25%
246 ),
247 radial-gradient(
248 hsla(0,0%,100%,.8) 30%,
249 transparent 35%
250 ),
251 radial-gradient(
252 hsla(0,0%,100%,.9) 30%,
253 transparent 35%
254 ),
255 radial-gradient(
256 white 45%,
257 transparent 50%
258 ),
259 radial-gradient(
260 hsla(0,0%,100%,.3) 5%,
261 transparent 10%
262 );
263 }
264 87.5% {
265 background-image:
266 radial-gradient(
267 hsla(0,0%,100%,.3) 5%,
268 transparent 10%
269 ),
270 radial-gradient(
271 hsla(0,0%,100%,.4) 10%,
272 transparent 15%
273 ),
274 radial-gradient(
275 hsla(0,0%,100%,.5) 10%,
276 transparent 15%
277 ),
278 radial-gradient(
279 hsla(0,0%,100%,.6) 20%,
280 transparent 25%
281 ),
282 radial-gradient(
283 hsla(0,0%,100%,.7) 20%,
284 transparent 25%
285 ),
286 radial-gradient(
287 hsla(0,0%,100%,.8) 30%,
288 transparent 35%
289 ),
290 radial-gradient(
291 hsla(0,0%,100%,.9) 30%,
292 transparent 35%
293 ),
294 radial-gradient(
295 white 45%,
296 transparent 50%
297 );
298 }
299 100% {
300 background-image:
301 radial-gradient(
302 white 45%,
303 transparent 50%
304 ),
305 radial-gradient(
306 hsla(0,0%,100%,.3) 5%,
307 transparent 10%
308 ),
309 radial-gradient(
310 hsla(0,0%,100%,.4) 10%,
311 transparent 15%
312 ),
313 radial-gradient(
314 hsla(0,0%,100%,.5) 10%,
315 transparent 15%
316 ),
317 radial-gradient(
318 hsla(0,0%,100%,.6) 20%,
319 transparent 25%
320 ),
321 radial-gradient(
322 hsla(0,0%,100%,.7) 20%,
323 transparent 25%
324 ),
325 radial-gradient(
326 hsla(0,0%,100%,.8) 30%,
327 transparent 35%
328 ),
329 radial-gradient(
330 hsla(0,0%,100%,.9) 30%,
331 transparent 35%
332 );
333 }
334 }