← back to Simple Spinnercompare with ground truth →
model output
Gemini 3 Flash Preview
Simple Spinner
A 0.81T 0.30
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>Nested Rotating Squares Animation</title>
7 <style>
8 /*
9 Analysis:
10 - Background: A solid, vibrant green (#009900).
11 - Elements: Four concentric squares with alternating colors (Cyan and Yellow).
12 - Motion: Consecutive squares rotate in opposite directions (CW, CCW, CW, CCW).
13 - Timing: The rotation is slow and linear. One 90-degree segment takes approximately 3-4 seconds.
14 - Scaling: There is a very subtle pulsing effect (scaling) that coincides with the rotation.
15 */
16
17 :root {
18 --bg-color: #009900;
19 --cyan-color: #00e5ff;
20 --yellow-color: #faff00;
21 --anim-speed: 12s; /* Duration for a full 360deg rotation */
22 }
23
24 body {
25 margin: 0;
26 padding: 0;
27 background-color: var(--bg-color);
28 display: flex;
29 justify-content: center;
30 align-items: center;
31 height: 100vh;
32 overflow: hidden;
33 }
34
35 .loader {
36 position: relative;
37 width: 100px;
38 height: 100px;
39 display: flex;
40 justify-content: center;
41 align-items: center;
42 }
43
44 .square {
45 position: absolute;
46 border: 2px solid;
47 box-sizing: border-box;
48 /* The squares appear slightly rounded at corners in the video due to anti-aliasing/rendering */
49 border-radius: 1px;
50 }
51
52 /* Outer Cyan Square */
53 .s1 {
54 width: 60px;
55 height: 60px;
56 border-color: var(--cyan-color);
57 animation: rotateCW var(--anim-speed) linear infinite, pulse 3s ease-in-out infinite alternate;
58 }
59
60 /* Second Yellow Square */
61 .s2 {
62 width: 44px;
63 height: 44px;
64 border-color: var(--yellow-color);
65 animation: rotateCCW var(--anim-speed) linear infinite, pulse 3s ease-in-out infinite alternate;
66 }
67
68 /* Third Cyan Square */
69 .s3 {
70 width: 28px;
71 height: 28px;
72 border-color: var(--cyan-color);
73 animation: rotateCW var(--anim-speed) linear infinite, pulse 3s ease-in-out infinite alternate;
74 }
75
76 /* Fourth Yellow Square (Inner) */
77 .s4 {
78 width: 12px;
79 height: 12px;
80 border-color: var(--yellow-color);
81 animation: rotateCCW var(--anim-speed) linear infinite, pulse 3s ease-in-out infinite alternate;
82 }
83
84 @keyframes rotateCW {
85 from { transform: rotate(0deg); }
86 to { transform: rotate(360deg); }
87 }
88
89 @keyframes rotateCCW {
90 from { transform: rotate(0deg); }
91 to { transform: rotate(-360deg); }
92 }
93
94 /* Subtle scaling to match the "breathing" effect of the animation */
95 @keyframes pulse {
96 0% { transform: scale(1) rotate(inherit); }
97 100% { transform: scale(1.1) rotate(inherit); }
98 }
99
100 /* Reset pulse transform to not conflict with rotation inheritance */
101 .square {
102 /* We combine them in the animation shorthand above, but we use rotate in keyframes
103 To handle both, we wrap them or use a container, but simplified CSS often handles
104 multiple animations by merging properties if possible.
105 Here, we'll refine to use a single transform-based keyframe for stability.
106 */
107 animation: none;
108 }
109
110 /* Refined animation assignments to ensure transforms don't overwrite each other */
111 .s1 { animation: spinPulseCW var(--anim-speed) linear infinite; }
112 .s2 { animation: spinPulseCCW var(--anim-speed) linear infinite; }
113 .s3 { animation: spinPulseCW var(--anim-speed) linear infinite; }
114 .s4 { animation: spinPulseCCW var(--anim-speed) linear infinite; }
115
116 @keyframes spinPulseCW {
117 0% { transform: rotate(0deg) scale(1); }
118 25% { transform: rotate(90deg) scale(1.08); }
119 50% { transform: rotate(180deg) scale(1); }
120 75% { transform: rotate(270deg) scale(1.08); }
121 100% { transform: rotate(360deg) scale(1); }
122 }
123
124 @keyframes spinPulseCCW {
125 0% { transform: rotate(0deg) scale(1); }
126 25% { transform: rotate(-90deg) scale(1.08); }
127 50% { transform: rotate(-180deg) scale(1); }
128 75% { transform: rotate(-270deg) scale(1.08); }
129 100% { transform: rotate(-360deg) scale(1); }
130 }
131 </style>
132</head>
133<body>
134
135 <div class="loader">
136 <div class="square s1"></div>
137 <div class="square s2"></div>
138 <div class="square s3"></div>
139 <div class="square s4"></div>
140 </div>
141
142</body>
143</html>