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>Orbit Loader Replica</title>
7<style>
8 :root{
9 --bg:#ef4b3a;
10 --ring:rgba(255,255,255,.72);
11 --dot:#fff;
12 --size:56px;
13 --stroke:3px;
14 --dot-size:11px;
15 --duration:1.25s;
16 }
17
18 html,body{
19 margin:0;
20 width:100%;
21 height:100%;
22 overflow:hidden;
23 background:var(--bg);
24 font-family:sans-serif;
25 }
26
27 .stage{
28 position:relative;
29 width:100%;
30 height:100%;
31 }
32
33 .loader{
34 position:absolute;
35 left:50%;
36 top:84px;
37 width:var(--size);
38 height:var(--size);
39 transform:translateX(-50%);
40 }
41
42 .ring{
43 position:absolute;
44 inset:0;
45 border-radius:50%;
46 border:var(--stroke) solid var(--ring);
47 box-sizing:border-box;
48 }
49
50 .orbit{
51 position:absolute;
52 inset:0;
53 animation:spin var(--duration) linear infinite;
54 }
55
56 .dot{
57 position:absolute;
58 width:var(--dot-size);
59 height:var(--dot-size);
60 border-radius:50%;
61 background:var(--dot);
62 left:50%;
63 top:0;
64 transform:translate(-50%,-35%);
65 box-shadow:0 0 0 1px rgba(255,255,255,.08);
66 }
67
68 @keyframes spin{
69 from{ transform:rotate(0deg); }
70 to{ transform:rotate(360deg); }
71 }
72</style>
73</head>
74<body>
75 <div class="stage">
76 <div class="loader" aria-label="loading animation">
77 <div class="ring"></div>
78 <div class="orbit">
79 <div class="dot"></div>
80 </div>
81 </div>
82 </div>
83</body>
84</html>