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>Clock Loader Animation</title>
7<style>
8 :root{
9 --bg:#ef4b3b;
10 --white:#fff;
11 --size:88px;
12 --stroke:4px;
13 --hand-w:4px;
14 --long:34px;
15 --short:22px;
16 --duration:1.6s;
17 }
18
19 html,body{
20 margin:0;
21 width:100%;
22 height:100%;
23 overflow:hidden;
24 background:var(--bg);
25 font-family:sans-serif;
26 }
27
28 .stage{
29 position:relative;
30 width:100vw;
31 height:100vh;
32 background:var(--bg);
33 }
34
35 .clock{
36 position:absolute;
37 left:50%;
38 top:13%;
39 width:var(--size);
40 height:var(--size);
41 transform:translateX(-50%);
42 border:var(--stroke) solid var(--white);
43 border-radius:50%;
44 box-sizing:border-box;
45 }
46
47 .hand{
48 position:absolute;
49 left:50%;
50 top:50%;
51 width:var(--hand-w);
52 background:var(--white);
53 border-radius:999px;
54 transform-origin:50% 100%;
55 margin-left:calc(var(--hand-w) / -2);
56 }
57
58 .minute{
59 height:var(--long);
60 margin-top:calc(var(--long) * -1);
61 animation:minuteSpin var(--duration) linear infinite;
62 }
63
64 .hour{
65 height:var(--short);
66 margin-top:calc(var(--short) * -1);
67 animation:hourSpin var(--duration) linear infinite;
68 }
69
70 @keyframes minuteSpin{
71 from{ transform:rotate(0deg); }
72 to{ transform:rotate(360deg); }
73 }
74
75 @keyframes hourSpin{
76 from{ transform:rotate(0deg); }
77 to{ transform:rotate(300deg); }
78 }
79
80 /* subtle crispness on scaled displays */
81 .clock, .hand{
82 will-change:transform;
83 }
84</style>
85</head>
86<body>
87 <div class="stage">
88 <div class="clock" aria-hidden="true">
89 <div class="hand minute"></div>
90 <div class="hand hour"></div>
91 </div>
92 </div>
93</body>
94</html>