1.spinner {
2 --accent: fuchsia;
3 --max-scale: 4;
4 --speed: 0.2;
5 display: flex;
6 gap: 0.3em;
7 transform: skew(15deg, 10deg);
8}
9
10.spinner span {
11 display: block;
12 background-color: var(--accent);
13 box-shadow: 1px 1px 5px 0.2px var(--accent);
14 width: 0.7px;
15 height: 0.6em;
16}
17
18.spinner .spinner-part-0 {
19 animation: load432 calc(1s/var(--speed)) linear infinite;
20}
21
22.spinner .spinner-part-1 {
23 animation: load432 calc(0.16s/var(--speed)) linear infinite;
24}
25
26.spinner .spinner-part-2 {
27 animation: load432 calc(0.4s/var(--speed)) linear infinite;
28}
29
30.spinner .spinner-part-3 {
31 animation: load432 calc(0.5s/var(--speed)) linear infinite;
32}
33
34@keyframes load432 {
35 50% {
36  transform: scaleY(var(--max-scale));
37 }
38}
39