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>Rotating Hourglass Icon</title>
7<style>
8 :root{
9 --bg:#ef4b3a;
10 --white:#fff;
11 --size:58px;
12 --stroke:3px;
13 }
14
15 html,body{
16 margin:0;
17 width:100%;
18 height:100%;
19 overflow:hidden;
20 background:var(--bg);
21 font-family:sans-serif;
22 }
23
24 .stage{
25 position:relative;
26 width:100vw;
27 height:100vh;
28 background:var(--bg);
29 }
30
31 .icon{
32 position:absolute;
33 left:50%;
34 top:66px;
35 width:var(--size);
36 height:var(--size);
37 transform:translateX(-50%);
38 }
39
40 .ring{
41 position:absolute;
42 inset:0;
43 border:var(--stroke) solid var(--white);
44 border-radius:50%;
45 box-sizing:border-box;
46 }
47
48 .spinner{
49 position:absolute;
50 inset:0;
51 animation: spin 1.2s linear infinite;
52 transform-origin:50% 50%;
53 }
54
55 .shape{
56 position:absolute;
57 left:50%;
58 top:50%;
59 width:34px;
60 height:42px;
61 transform:translate(-50%,-50%);
62 }
63
64 .shape::before,
65 .shape::after{
66 content:"";
67 position:absolute;
68 left:50%;
69 transform:translateX(-50%);
70 width:0;
71 height:0;
72 border-left:17px solid transparent;
73 border-right:17px solid transparent;
74 }
75
76 .shape::before{
77 top:0;
78 border-top:0;
79 border-bottom:21px solid var(--white);
80 }
81
82 .shape::after{
83 bottom:0;
84 border-bottom:0;
85 border-top:21px solid var(--white);
86 }
87
88 @keyframes spin{
89 from{ transform:rotate(0deg); }
90 to{ transform:rotate(360deg); }
91 }
92</style>
93</head>
94<body>
95 <div class="stage">
96 <div class="icon">
97 <div class="ring"></div>
98 <div class="spinner">
99 <div class="shape"></div>
100 </div>
101 </div>
102 </div>
103</body>
104</html>