1html {
2 height: 100%;
3
4 background-image:
5 radial-gradient(
6 #222 65%,
7 transparent 70%
8 ),
9 radial-gradient(
10 #222 65%,
11 transparent 70%
12 ),
13 radial-gradient(
14 #222 65%,
15 transparent 70%
16 ),
17 radial-gradient(
18 #222 65%,
19 transparent 70%
20 );
21
22 background-repeat: no-repeat;
23
24 background-size:
25 2em 2em,
26 2em 2em,
27 2em 2em,
28 2em 2em;
29 background-position:
30 calc(50% - 2.6em) 50%,
31 calc(50% - 2.6em) 50%,
32 50% 50%,
33 calc(50% + 2.6em) 50%;
34
35 animation: loadrunner .6s infinite;
36 }
37
38@keyframes loadrunner {
39 0% {
40 background-size:
41 0em 0em,
42 2em 2em,
43 2em 2em,
44 2em 2em;
45 background-position:
46 calc(50% - 2.6em) 50%,
47 calc(50% - 2.6em) 50%,
48 50% 50%,
49 calc(50% + 2.6em) 50%;
50 }
51 100% {
52 background-size:
53 2em 2em,
54 2em 2em,
55 2em 2em,
56 0em 0em;
57 background-position:
58 calc(50% - 2.6em) 50%,
59 50% 50%,
60 calc(50% + 2.6em) 50%,
61 calc(50% + 2.6em) 50%;
62 }
63 }