← back to Simple Spinnercompare with ground truth →
model output
Gemini 3 Flash Preview
Simple Spinner
A 0.79T 0.28
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>Color Wiping Circle Animation</title>
7 <style>
8 /* Define the background color and center the content */
9 body {
10 margin: 0;
11 padding: 0;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 height: 100vh;
16 background-color: #4671a3; /* Exact blue background from the video */
17 overflow: hidden;
18 }
19
20 /* The container for the animated circle */
21 .circle-container {
22 position: relative;
23 width: 48px;
24 height: 48px;
25 border-radius: 50%;
26 overflow: hidden;
27 /* Start with the initial cyan color */
28 background-color: #14cbd9;
29 }
30
31 /*
32 The wipe effect is achieved by using a pseudo-element
33 that changes its color and slides up to cover the parent.
34 */
35 .circle-container::after {
36 content: '';
37 position: absolute;
38 bottom: 0;
39 left: 0;
40 width: 100%;
41 height: 100%;
42 transform: translateY(100%);
43 animation: wipe-animation 4s infinite cubic-bezier(0.45, 0, 0.55, 1);
44 }
45
46 /*
47 The parent's background color also cycles to stay
48 behind the moving wipe.
49 */
50 .circle-container {
51 animation: base-color-cycle 4s infinite step-end;
52 }
53
54 /*
55 Syncing the base color to the previous color in the sequence
56 so the "wipe" slides over the correct background.
57 */
58 @keyframes base-color-cycle {
59 0% { background-color: #14cbd9; } /* Cyan */
60 25% { background-color: #4caf50; } /* Green */
61 50% { background-color: #ff9100; } /* Orange */
62 75% { background-color: #f44336; } /* Red */
63 }
64
65 /*
66 The wipe animation:
67 - Translates the element up to cover the base.
68 - Changes color for the next segment.
69 - Resets instantly at the end of each segment (using 0.01% steps).
70 */
71 @keyframes wipe-animation {
72 /* 0-25%: Transition from Cyan to Green */
73 0% { transform: translateY(100%); background-color: #4caf50; }
74 20% { transform: translateY(0%); background-color: #4caf50; }
75 24.9% { transform: translateY(0%); background-color: #4caf50; }
76
77 /* 25-50%: Transition from Green to Orange */
78 25% { transform: translateY(100%); background-color: #ff9100; }
79 45% { transform: translateY(0%); background-color: #ff9100; }
80 49.9% { transform: translateY(0%); background-color: #ff9100; }
81
82 /* 50-75%: Transition from Orange to Red */
83 50% { transform: translateY(100%); background-color: #f44336; }
84 70% { transform: translateY(0%); background-color: #f44336; }
85 74.9% { transform: translateY(0%); background-color: #f44336; }
86
87 /* 75-100%: Transition from Red back to Cyan */
88 75% { transform: translateY(100%); background-color: #14cbd9; }
89 95% { transform: translateY(0%); background-color: #14cbd9; }
90 100% { transform: translateY(0%); background-color: #14cbd9; }
91 }
92
93 /*
94 Note on frames:
95 At 0.5s, 1.5s, and 3.0s, the video shows a diagonal or slightly curved wipe.
96 To mimic that slight diagonal movement seen in the video frames,
97 we add a rotation to the wiping element.
98 */
99 .circle-container::after {
100 transform-origin: center bottom;
101 /* Slight rotation to match the diagonal wipes in frames 0.5s and 3.0s */
102 transform: translateY(100%) rotate(10deg) scale(1.2);
103 }
104
105 @keyframes wipe-animation {
106 0% { transform: translateY(110%) rotate(15deg) scale(1.5); background-color: #4caf50; }
107 20% { transform: translateY(0%) rotate(0deg) scale(1.5); background-color: #4caf50; }
108 24.9%{ transform: translateY(0%) rotate(0deg) scale(1.5); background-color: #4caf50; }
109
110 25% { transform: translateY(110%) rotate(5deg) scale(1.5); background-color: #ff9100; }
111 45% { transform: translateY(0%) rotate(0deg) scale(1.5); background-color: #ff9100; }
112 49.9%{ transform: translateY(0%) rotate(0deg) scale(1.5); background-color: #ff9100; }
113
114 50% { transform: translateY(110%) rotate(15deg) scale(1.5); background-color: #f44336; }
115 70% { transform: translateY(0%) rotate(0deg) scale(1.5); background-color: #f44336; }
116 74.9%{ transform: translateY(0%) rotate(0deg) scale(1.5); background-color: #f44336; }
117
118 75% { transform: translateY(110%) rotate(5deg) scale(1.5); background-color: #14cbd9; }
119 95% { transform: translateY(0%) rotate(0deg) scale(1.5); background-color: #14cbd9; }
120 100% { transform: translateY(0%) rotate(0deg) scale(1.5); background-color: #14cbd9; }
121 }
122 </style>
123</head>
124<body>
125
126 <div class="circle-container"></div>
127
128 <script>
129 /**
130 * The animation is purely CSS-driven for performance and smoothness.
131 * The loop cycles every 4 seconds, matching the roughly 1-second
132 * intervals between major color states in the video.
133 */
134 </script>
135</body>
136</html>