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 Rotating Arc Loader</title>
7<style>
8 :root{
9 --bg:#0f4fae;
10 --arc:#2fb7d8;
11 --size:48px;
12 --stroke:5px;
13 --dur:1s;
14 }
15
16 html,body{
17 margin:0;
18 width:100%;
19 height:100%;
20 overflow:hidden;
21 background:var(--bg);
22 }
23
24 body{
25 display:grid;
26 place-items:center;
27 }
28
29 .loader{
30 position:relative;
31 width:var(--size);
32 height:var(--size);
33 animation:spin var(--dur) linear infinite;
34 }
35
36 .loader::before,
37 .loader::after{
38 content:"";
39 position:absolute;
40 inset:0;
41 border-radius:50%;
42 box-sizing:border-box;
43 border:var(--stroke) solid transparent;
44 border-top-color:var(--arc);
45 width:100%;
46 height:100%;
47 opacity:.95;
48 }
49
50 /* two short opposing arcs */
51 .loader::before{
52 transform:rotate(0deg);
53 clip-path:inset(0 0 50% 0);
54 }
55
56 .loader::after{
57 transform:rotate(180deg);
58 clip-path:inset(0 0 50% 0);
59 }
60
61 @keyframes spin{
62 from{ transform:rotate(0deg); }
63 to{ transform:rotate(360deg); }
64 }
65</style>
66</head>
67<body>
68 <div class="loader" aria-label="loading"></div>
69</body>
70</html>