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 Animation</title>
7<style>
8 html, body {
9 margin: 0;
10 width: 100%;
11 height: 100%;
12 overflow: hidden;
13 background: #fff;
14 }
15
16 .scene {
17 position: relative;
18 width: 100vw;
19 height: 100vh;
20 background:
21 linear-gradient(to bottom, #d52b2b 0 32.5%, #ffffff 32.5% 100%);
22 }
23
24 .spinner {
25 position: absolute;
26 left: 50%;
27 top: 12.5%;
28 width: 34px;
29 height: 34px;
30 transform: translateX(-50%);
31 }
32
33 .ring,
34 .ring::before {
35 content: "";
36 position: absolute;
37 inset: 0;
38 border-radius: 50%;
39 box-sizing: border-box;
40 border: 2px solid transparent;
41 border-top-color: rgba(88, 34, 34, 0.45);
42 border-left-color: rgba(88, 34, 34, 0.45);
43 }
44
45 .ring {
46 animation: spin 1s linear infinite;
47 }
48
49 .ring::before {
50 inset: 2px;
51 border-top-color: rgba(88, 34, 34, 0.28);
52 border-left-color: rgba(88, 34, 34, 0.28);
53 animation: spinReverse 1s linear infinite;
54 }
55
56 @keyframes spin {
57 from { transform: rotate(0deg); }
58 to { transform: rotate(360deg); }
59 }
60
61 @keyframes spinReverse {
62 from { transform: rotate(12deg); }
63 to { transform: rotate(-348deg); }
64 }
65</style>
66</head>
67<body>
68 <div class="scene">
69 <div class="spinner">
70 <div class="ring"></div>
71 </div>
72 </div>
73</body>
74</html>