1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width,initial-scale=1.0" />
6<title>Arc Loader Recreation</title>
7<style>
8 :root{
9 --bg:#0f8f79;
10 --white:#f4f4f4;
11 --shadow:#d9d9d9;
12 --size:42px;
13 --stroke:7px;
14 --gap:4px;
15 --dur:0.9s;
16 }
17
18 html,body{
19 margin:0;
20 width:100%;
21 height:100%;
22 overflow:hidden;
23 background:var(--bg);
24 }
25
26 body{
27 display:grid;
28 place-items:center;
29 }
30
31 .loader{
32 position:relative;
33 width:var(--size);
34 height:var(--size);
35 transform: translateY(2px);
36 }
37
38 .arc{
39 position:absolute;
40 inset:0;
41 border-radius:50%;
42 box-sizing:border-box;
43 border:var(--stroke) solid transparent;
44 border-bottom-color:var(--white);
45 border-left-color:var(--white);
46 filter: drop-shadow(1px 1px 0 var(--shadow));
47 transform-origin:50% 50%;
48 animation: wobble var(--dur) ease-in-out infinite;
49 }
50
51 .arc.back{
52 inset:calc(var(--gap) + 1px);
53 border-width:6px;
54 opacity:.98;
55 animation-delay:calc(var(--dur) * -0.5);
56 }
57
58 .arc.front{
59 inset:0;
60 }
61
62 @keyframes wobble{
63 0%{
64 transform:rotate(38deg) scaleX(1.02) scaleY(.98);
65 }
66 25%{
67 transform:rotate(8deg) scaleX(.98) scaleY(1.02);
68 }
69 50%{
70 transform:rotate(-18deg) scaleX(1.03) scaleY(.97);
71 }
72 75%{
73 transform:rotate(10deg) scaleX(.99) scaleY(1.01);
74 }
75 100%{
76 transform:rotate(38deg) scaleX(1.02) scaleY(.98);
77 }
78 }
79</style>
80</head>
81<body>
82 <div class="loader" aria-label="loading">
83 <div class="arc back"></div>
84 <div class="arc front"></div>
85 </div>
86</body>
87</html>