Loader by Charly-T

1.loader {
2  --moon-r: 0.7em;
3  --planet-r: 1.75em;
4  --planet-stroke-width: 4;
5  --center: 50;
6  --moon-max: 80;
7  --moon-min: 20;
8  --animation-duration: 4000ms;
9  --planet-stroke: black;
10  --planet-fill: white;
11  --moon-fill: #fecb00;
12  width: 7em;
13}
14
15.planet {
16  cx: var(--center);
17  cy: var(--center);
18  r: var(--planet-r);
19  fill: var(--planet-fill);
20  stroke: var(--planet-stroke);
21  stroke-width: var(--planet-stroke-width);
22}
23
24.moon {
25  fill: var(--moon-fill);
26  r: var(--moon-r);
27}
28
29.moon-front {
30  animation: orbit0234 var(--animation-duration) ease-in-out infinite,
31    orbit-front var(--animation-duration) linear infinite;
32}
33
34.moon-back {
35  animation: orbit0234 var(--animation-duration) ease-in-out infinite;
36}
37
38@keyframes orbit0234 {
39  0% {
40    cx: var(--moon-max);
41    cy: var(--moon-min);
42  }
43
44  50% {
45    cx: var(--moon-min);
46    cy: var(--moon-max);
47  }
48
49  100% {
50    cx: var(--moon-max);
51    cy: var(--moon-min);
52  }
53}
54
55@keyframes orbit-front {
56  0% {
57    opacity: 0;
58  }
59
60  49% {
61    opacity: 0;
62  }
63
64  50% {
65    opacity: 1;
66  }
67}
68