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>Minimal Arc Loader</title>
7<style>
8 html, body {
9 margin: 0;
10 width: 100%;
11 height: 100%;
12 overflow: hidden;
13 background: #fff;
14 }
15
16 .scene {
17 position: relative;
18 width: 100vw;
19 height: 100vh;
20 background:
21 linear-gradient(to bottom, #ef4a10 0 32.5%, #ffffff 32.5% 100%);
22 }
23
24 .loader {
25 position: absolute;
26 left: 50%;
27 top: 12.5%;
28 width: 44px;
29 height: 44px;
30 transform: translateX(-50%);
31 filter: blur(0.2px);
32 }
33
34 .arc {
35 position: absolute;
36 inset: 0;
37 border-radius: 50%;
38 border: 3px solid transparent;
39 border-top-color: rgba(120, 45, 20, 0.42);
40 border-left-color: rgba(120, 45, 20, 0.28);
41 transform: rotate(0deg);
42 filter: drop-shadow(0 1px 1px rgba(80, 25, 10, 0.18));
43 animation: spin 1s linear infinite;
44 }
45
46 /* soften and shorten the visible stroke to resemble the faint curved segment */
47 .arc::after {
48 content: "";
49 position: absolute;
50 inset: -3px;
51 border-radius: 50%;
52 background:
53 conic-gradient(
54 from 210deg,
55 transparent 0deg 250deg,
56 rgba(255,255,255,0.92) 250deg 360deg
57 );
58 -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
59 mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
60 pointer-events: none;
61 }
62
63 @keyframes spin {
64 from { transform: rotate(0deg); }
65 to { transform: rotate(360deg); }
66 }
67</style>
68</head>
69<body>
70 <div class="scene">
71 <div class="loader">
72 <div class="arc"></div>
73 </div>
74 </div>
75</body>
76</html>