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>Rotating Nested Squares</title>
7<style>
8 :root{
9 --bg:#009900;
10 --blue:#2aa7d8;
11 --gold:#d8c24a;
12 --white:#f4f4f4;
13 --size:48px;
14 --stroke:2px;
15 --dur:1.6s;
16 }
17
18 html,body{
19 margin:0;
20 width:100%;
21 height:100%;
22 overflow:hidden;
23 background:var(--bg);
24 }
25
26 body{
27 display:grid;
28 place-items:center;
29 }
30
31 .spinner{
32 position:relative;
33 width:var(--size);
34 height:var(--size);
35 }
36
37 .sq{
38 position:absolute;
39 inset:0;
40 box-sizing:border-box;
41 transform-origin:50% 50%;
42 }
43
44 .outer{
45 border:var(--stroke) solid var(--blue);
46 animation:outerSpin var(--dur) linear infinite;
47 }
48
49 .mid{
50 inset:6px;
51 border:var(--stroke) solid var(--gold);
52 animation:midSpin var(--dur) linear infinite;
53 }
54
55 .inner{
56 inset:13px;
57 border:var(--stroke) solid var(--white);
58 animation:innerSpin var(--dur) linear infinite;
59 }
60
61 @keyframes outerSpin{
62 0% { transform:rotate(0deg); }
63 25% { transform:rotate(18deg); }
64 50% { transform:rotate(36deg); }
65 75% { transform:rotate(18deg); }
66 100% { transform:rotate(0deg); }
67 }
68
69 @keyframes midSpin{
70 0% { transform:rotate(0deg); }
71 25% { transform:rotate(-14deg); }
72 50% { transform:rotate(-28deg); }
73 75% { transform:rotate(-14deg); }
74 100% { transform:rotate(0deg); }
75 }
76
77 @keyframes innerSpin{
78 0% { transform:rotate(0deg); }
79 25% { transform:rotate(45deg); }
80 50% { transform:rotate(90deg); }
81 75% { transform:rotate(45deg); }
82 100% { transform:rotate(0deg); }
83 }
84</style>
85</head>
86<body>
87 <div class="spinner" aria-hidden="true">
88 <div class="sq outer"></div>
89 <div class="sq mid"></div>
90 <div class="sq inner"></div>
91 </div>
92</body>
93</html>