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>Rotating Arc Loader</title>
7<style>
8 :root{
9 --bg:#ef4b3a;
10 --white:#fff;
11 --ghost:rgba(255,255,255,.14);
12 --size:84px;
13 --ring:4px;
14 --dot:6px;
15 --sweep:92deg;
16 --dur:1.2s;
17 }
18
19 html,body{
20 margin:0;
21 width:100%;
22 height:100%;
23 overflow:hidden;
24 background:var(--bg);
25 font-family:sans-serif;
26 }
27
28 .stage{
29 position:relative;
30 width:100vw;
31 height:100vh;
32 background:var(--bg);
33 }
34
35 /* place slightly above center like the reference */
36 .loader{
37 position:absolute;
38 left:50%;
39 top:13%;
40 width:var(--size);
41 height:var(--size);
42 transform:translate(-50%,-50%);
43 }
44
45 .spinner{
46 position:absolute;
47 inset:0;
48 animation:spin var(--dur) linear infinite;
49 }
50
51 .arc{
52 position:absolute;
53 inset:0;
54 border-radius:50%;
55 box-sizing:border-box;
56 }
57
58 /* bright white arc */
59 .arc.main{
60 background:
61 conic-gradient(from -46deg,
62 var(--white) 0 var(--sweep),
63 transparent var(--sweep) 360deg);
64 -webkit-mask:
65 radial-gradient(farthest-side,
66 transparent calc(50% - var(--ring) - 1px),
67 #000 calc(50% - var(--ring)),
68 #000 calc(50% + var(--ring)),
69 transparent calc(50% + var(--ring) + 1px));
70 mask:
71 radial-gradient(farthest-side,
72 transparent calc(50% - var(--ring) - 1px),
73 #000 calc(50% - var(--ring)),
74 #000 calc(50% + var(--ring)),
75 transparent calc(50% + var(--ring) + 1px));
76 }
77
78 /* soft filled wedge trailing each arc */
79 .arc.ghost{
80 background:
81 conic-gradient(from -46deg,
82 var(--ghost) 0 calc(var(--sweep) - 8deg),
83 transparent calc(var(--sweep) - 8deg) 360deg);
84 clip-path:circle(50%);
85 transform:scale(.92);
86 filter:blur(.2px);
87 }
88
89 .half{
90 position:absolute;
91 inset:0;
92 }
93
94 .half.b{
95 transform:rotate(180deg);
96 }
97
98 .dot{
99 position:absolute;
100 left:50%;
101 top:50%;
102 width:var(--dot);
103 height:var(--dot);
104 margin-left:calc(var(--dot) / -2);
105 margin-top:calc(var(--dot) / -2);
106 border-radius:50%;
107 background:var(--white);
108 }
109
110 @keyframes spin{
111 from{ transform:rotate(0deg); }
112 to{ transform:rotate(360deg); }
113 }
114</style>
115</head>
116<body>
117 <div class="stage">
118 <div class="loader">
119 <div class="spinner">
120 <div class="half a">
121 <div class="arc ghost"></div>
122 <div class="arc main"></div>
123 </div>
124 <div class="half b">
125 <div class="arc ghost"></div>
126 <div class="arc main"></div>
127 </div>
128 </div>
129 <div class="dot"></div>
130 </div>
131 </div>
132</body>
133</html>