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" />
6<title>Recreated Loader Animation</title>
7<style>
8 :root{
9 --bg:#ef4b3a;
10 --pink:#f57f7f;
11 --white:#fff;
12 --size:min(8vw,42px);
13 --ring:calc(var(--size) * .34);
14 }
15
16 html,body{
17 margin:0;
18 width:100%;
19 height:100%;
20 overflow:hidden;
21 background:var(--bg);
22 font-family:sans-serif;
23 }
24
25 .stage{
26 position:relative;
27 width:100%;
28 height:100%;
29 background:var(--bg);
30 }
31
32 .loader{
33 position:absolute;
34 left:50%;
35 top:8.2%;
36 width:var(--size);
37 height:var(--size);
38 transform:translateX(-50%);
39 }
40
41 /* pink center disc */
42 .core{
43 position:absolute;
44 inset:0;
45 border-radius:50%;
46 background:var(--pink);
47 animation:spin 1s linear infinite;
48 }
49
50 /* white side crescents */
51 .arc{
52 position:absolute;
53 top:50%;
54 width:calc(var(--size) * .42);
55 height:calc(var(--size) * .82);
56 transform:translateY(-50%);
57 background:var(--white);
58 border-radius:999px;
59 overflow:hidden;
60 animation:spin 1s linear infinite;
61 }
62
63 .arc::after{
64 content:"";
65 position:absolute;
66 top:50%;
67 width:calc(var(--size) * .34);
68 height:calc(var(--size) * .34);
69 background:var(--bg);
70 border-radius:50%;
71 transform:translateY(-50%);
72 }
73
74 .arc.left{
75 left:0;
76 }
77 .arc.left::after{
78 right:calc(var(--size) * -.11);
79 }
80
81 .arc.right{
82 right:0;
83 }
84 .arc.right::after{
85 left:calc(var(--size) * -.11);
86 }
87
88 /* inner cutouts to create the pinched X-like negative space */
89 .core::before,
90 .core::after{
91 content:"";
92 position:absolute;
93 left:50%;
94 top:50%;
95 width:calc(var(--size) * .18);
96 height:calc(var(--size) * .42);
97 background:var(--bg);
98 border-radius:999px;
99 transform-origin:center;
100 }
101
102 .core::before{
103 transform:translate(-50%,-50%) rotate(45deg);
104 }
105
106 .core::after{
107 transform:translate(-50%,-50%) rotate(-45deg);
108 }
109
110 @keyframes spin{
111 from{ transform:rotate(0deg); }
112 to{ transform:rotate(180deg); }
113 }
114</style>
115</head>
116<body>
117 <div class="stage">
118 <div class="loader" aria-label="loading animation">
119 <div class="arc left"></div>
120 <div class="arc right"></div>
121 <div class="core"></div>
122 </div>
123 </div>
124</body>
125</html>