model output
Gemini 3 Flash Preview

Simple Spinner
A 0.80T 0.33
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>Pulsing Rings Animation</title>
7    <style>
8        /* Reset and layout */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            background-color: #1a1a1a;
15            display: flex;
16            justify-content: center;
17            align-items: center;
18            overflow: hidden;
19        }
20
21        /* Container for the rings */
22        .container {
23            position: relative;
24            width: 100px;
25            height: 100px;
26            display: flex;
27            justify-content: center;
28            align-items: center;
29        }
30
31        /* Individual ring styles */
32        .ring {
33            position: absolute;
34            width: 30px;
35            height: 30px;
36            border-radius: 50%;
37            border: 2px solid transparent;
38            /* Using cubic-bezier to match the "burst" feel of the video */
39            animation: ripple 2s cubic-bezier(0, 0.3, 0.7, 1) infinite;
40            opacity: 0;
41        }
42
43        /* Animation keyframes */
44        @keyframes ripple {
45            0% {
46                transform: scale(0.5);
47                opacity: 0;
48                border-width: 3px;
49            }
50            5% {
51                opacity: 1;
52            }
53            100% {
54                transform: scale(4.5);
55                opacity: 0;
56                border-width: 1px;
57            }
58        }
59
60        /* Ring-specific colors and delays to match video timing */
61        /* Each ring is 0.5s apart, total loop is 2s */
62        .ring:nth-child(1) {
63            border-color: #00e5ff; /* Cyan */
64            animation-delay: 0s;
65        }
66
67        .ring:nth-child(2) {
68            border-color: #aeea00; /* Greenish */
69            animation-delay: 0.5s;
70        }
71
72        .ring:nth-child(3) {
73            border-color: #4a1444; /* Dark Purple/Pink */
74            animation-delay: 1.0s;
75        }
76
77        .ring:nth-child(4) {
78            border-color: #ff6d00; /* Orange/Red */
79            animation-delay: 1.5s;
80        }
81    </style>
82</head>
83<body>
84
85    <div class="container">
86        <div class="ring"></div>
87        <div class="ring"></div>
88        <div class="ring"></div>
89        <div class="ring"></div>
90    </div>
91
92    <script>
93        /**
94         * The animation is purely CSS-driven for performance and smoothness.
95         * The video shows a sequence of 4 rings appearing every 0.5 seconds.
96         * Cycle breakdown:
97         * 0.0s: Cyan Ring starts
98         * 0.5s: Green Ring starts
99         * 1.0s: Purple Ring starts
100         * 1.5s: Orange Ring starts
101         * 2.0s: Cycle repeats
102         */
103    </script>
104</body>
105</html>