Loader by fanishah

1.loader {
2  display: block;
3  width: 8em;
4  height: 8em;
5}
6
7.loader_ring {
8  stroke: hsla(var(--hue), 90%, 5%, 0.1);
9  transition: stroke 0.3s;
10}
11
12.loader_worm1,
13  .loader_worm2,
14  .loader_worm2-1 {
15  animation: worm1 5s ease-in infinite;
16}
17
18.loader_worm1 {
19  transform-origin: 64px 64px;
20}
21
22.loader_worm2,
23  .loader_worm2-1 {
24  transform-origin: 22px 22px;
25}
26
27.loader_worm2 {
28  animation-name: worm2;
29  animation-timing-function: linear;
30}
31
32.loader_worm2-1 {
33  animation-name: worm2-1;
34  stroke-dashoffset: 175.92;
35}
36
37  /* Dark theme */
38@media (prefers-color-scheme: dark) {
39  :root {
40    --bg: hsl(var(--hue), 90%, 5%);
41    --fg: hsl(var(--hue), 90%, 95%);
42  }
43
44  .loader_ring {
45    stroke: hsla(var(--hue), 90%, 95%, 0.1);
46  }
47}
48
49  /* Animations */
50@keyframes worm1 {
51  from,
52    to {
53    stroke-dashoffset: 0;
54  }
55
56  12.5% {
57    animation-timing-function: ease-out;
58    stroke-dashoffset: -175.91;
59  }
60
61  25% {
62    animation-timing-function: cubic-bezier(0, 0, 0.43, 1);
63    stroke-dashoffset: -307.88;
64  }
65
66  50% {
67    animation-timing-function: ease-in;
68    stroke-dashoffset: -483.8;
69  }
70
71  62.5% {
72    animation-timing-function: ease-out;
73    stroke-dashoffset: -307.88;
74  }
75
76  75% {
77    animation-timing-function: cubic-bezier(0, 0, 0.43, 1);
78    stroke-dashoffset: -175.91;
79  }
80}
81
82@keyframes worm2 {
83  from,
84    12.5%,
85    75%,
86    to {
87    transform: rotate(0) translate(-42px, 0);
88  }
89
90  25%,
91    62.5% {
92    transform: rotate(0.5turn) translate(-42px, 0);
93  }
94}
95
96@keyframes worm2-1 {
97  from {
98    stroke-dashoffset: 175.91;
99    transform: rotate(0);
100  }
101
102  12.5% {
103    animation-timing-function: cubic-bezier(0, 0, 0.42, 1);
104    stroke-dashoffset: 0;
105    transform: rotate(0);
106  }
107
108  25% {
109    animation-timing-function: linear;
110    stroke-dashoffset: 0;
111    transform: rotate(1.5turn);
112  }
113
114  37.5%,
115    50% {
116    stroke-dashoffset: -175.91;
117    transform: rotate(1.5turn);
118  }
119
120  62.5% {
121    animation-timing-function: cubic-bezier(0, 0, 0.42, 1);
122    stroke-dashoffset: 0;
123    transform: rotate(1.5turn);
124  }
125
126  75% {
127    animation-timing-function: linear;
128    stroke-dashoffset: 0;
129    transform: rotate(0);
130  }
131
132  87.5%,
133    to {
134    stroke-dashoffset: 175.92;
135    transform: rotate(0);
136  }
137}