Loader by SelfMadeSystem

1/* Google flip animation thing */
2
3#a {
4  transform-origin: center;
5  animation: a 2s step-end infinite;
6}
7
8@keyframes a {
9  0% {
10    transform: rotate(90deg);
11  }
12
13  25% {
14    transform: rotate(180deg);
15  }
16
17  50% {
18    transform: rotate(270deg);
19  }
20
21  75% {
22    transform: rotate(360deg);
23  }
24}
25
26#b {
27  animation: b1 1s linear infinite, b2 2s step-end infinite;
28  animation-delay: var(--delay, 0s);
29}
30
31@keyframes b1 {
32  0%,
33    100% {
34    d: path("M 0 12 a 12 12 0 0 1 24 0 a 12 12 0 0 0 -24 0");
35  }
36
37  25%,
38    75% {
39    d: path("M 0 12 a 12 12 0 0 1 24 0 a 12 0 0 0 0 -24 0");
40  }
41}
42
43@keyframes b2 {
44  0% {
45    fill: hsl(var(--c1), 100%, 43%);
46  }
47
48  50% {
49    fill: hsl(var(--c2), 100%, 43%);
50  }
51}
52
53#c {
54  animation: c1 1s linear infinite, c2 2s linear infinite;
55  animation-delay: var(--delay, 0s);
56}
57
58@keyframes c1 {
59  0%,
60    25%,
61    75%,
62    100% {
63    d: path("M 0 12 h 24 a 12 0  0 0 1 -24 0");
64  }
65
66  50% {
67    d: path("M 0 12 h 24 a 12 12 0 0 1 -24 0");
68  }
69}
70
71@keyframes c2 {
72  0%,
73    25% {
74    fill: hsl(var(--c1), 100%, 43%);
75  }
76
77  12.5%,
78    37.5% {
79    fill: hsl(var(--c1), 100%, 25%);
80  }
81
82  50%,
83    75% {
84    fill: hsl(var(--c2), 100%, 43%);
85  }
86
87  62.5%,
88    87.5% {
89    fill: hsl(var(--c2), 100%, 25%);
90  }
91}