Loader by Srivatsajbhat

1:root {
2  --hue: 223px;
3  --bg: hsl(var(--hue),90%,95%);
4  --fg: hsl(var(--hue),90%,5%);
5  --trans-dur: 0.3s;
6  font-size: calc(16px + (24px - 16px) * (690px - 320px) / (1280px - 320px));
7}
8
9.body {
10  background-color: var(--bg);
11  color: var(--fg);
12  font: 16px/1.5 sans-serif;
13  height: 100px;
14  display: grid;
15  place-items: center;
16  transition: background-color var(--trans-dur);
17}
18
19main {
20  padding: 24px 0;
21}
22
23.ip {
24  width: 100px;
25  height: 50px;
26}
27
28.ip__track {
29  stroke: hsl(var(--hue),90%,90%);
30  transition: stroke var(--trans-dur);
31}
32
33.ip__worm1,
34.ip__worm2 {
35  animation: worm1 2s linear infinite;
36}
37
38.ip__worm2 {
39  animation-name: worm2;
40}
41
42/* Dark theme */
43@media (prefers-color-scheme: dark) {
44  :root {
45    --bg: hsl(var(--hue),90%,5%);
46    --fg: hsl(var(--hue),90%,95%);
47  }
48
49  .ip__track {
50    stroke: hsl(var(--hue),90%,15%);
51  }
52}
53
54/* Animation */
55@keyframes worm1 {
56  from {
57    stroke-dashoffset: 0;
58  }
59
60  50% {
61    animation-timing-function: steps(1);
62    stroke-dashoffset: -358;
63  }
64
65  50.01% {
66    animation-timing-function: linear;
67    stroke-dashoffset: 358;
68  }
69
70  to {
71    stroke-dashoffset: 0;
72  }
73}
74
75@keyframes worm2 {
76  from {
77    stroke-dashoffset: 358;
78  }
79
80  50% {
81    stroke-dashoffset: 0;
82  }
83
84  to {
85    stroke-dashoffset: -358;
86  }
87}