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>Recreated Loader Animation</title>
7<style>
8 :root{
9 --purple:#512da8;
10 --bg:#ffffff;
11 --ring:rgba(255,255,255,.22);
12 --size:34px;
13 --stroke:3px;
14 --top-height:32.5vh;
15 }
16
17 html,body{
18 margin:0;
19 width:100%;
20 height:100%;
21 overflow:hidden;
22 background:var(--bg);
23 font-family:sans-serif;
24 }
25
26 .scene{
27 position:relative;
28 width:100vw;
29 height:100vh;
30 background:
31 linear-gradient(to bottom,
32 var(--purple) 0,
33 var(--purple) var(--top-height),
34 var(--bg) var(--top-height),
35 var(--bg) 100%);
36 }
37
38 .loader{
39 position:absolute;
40 left:50%;
41 top:16.2vh;
42 width:var(--size);
43 height:var(--size);
44 transform:translate(-50%,-50%);
45 animation: spin 1.15s linear infinite;
46 opacity:.95;
47 }
48
49 .arc{
50 position:absolute;
51 inset:0;
52 border-radius:50%;
53 box-sizing:border-box;
54 border:var(--stroke) solid transparent;
55 filter:blur(.2px);
56 }
57
58 .arc.top{
59 border-top-color:var(--ring);
60 transform:rotate(-18deg);
61 }
62
63 .arc.bottom{
64 border-bottom-color:var(--ring);
65 transform:rotate(-18deg);
66 }
67
68 @keyframes spin{
69 from{ transform:translate(-50%,-50%) rotate(0deg); }
70 to{ transform:translate(-50%,-50%) rotate(360deg); }
71 }
72</style>
73</head>
74<body>
75 <div class="scene">
76 <div class="loader" aria-hidden="true">
77 <div class="arc top"></div>
78 <div class="arc bottom"></div>
79 </div>
80 </div>
81</body>
82</html>