model output
Gemini 3 Flash Preview

Simple Spinner
A 0.86T 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>Teal Loading Animation</title>
7    <style>
8        /* Reset and layout */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            /* The specific teal background color observed in the video */
18            background-color: #14876d;
19            overflow: hidden;
20        }
21
22        /* The loader container */
23        .loader {
24            position: relative;
25            width: 36px;
26            height: 36px;
27        }
28
29        /* The spinning element */
30        .spinner {
31            width: 100%;
32            height: 100%;
33            border: 4px solid transparent;
34            /* Creates two white arcs on opposite sides */
35            border-top: 4px solid #ffffff;
36            border-bottom: 4px solid #ffffff;
37            border-radius: 50%;
38            
39            /* 
40               The animation is a continuous rotation. 
41               The video shows a 180-degree turn roughly every 0.5 seconds,
42               resulting in a full 360-degree rotation every 1 second.
43            */
44            animation: rotate 1s linear infinite;
45            
46            /* Smooth edges for the arcs */
47            box-sizing: border-box;
48        }
49
50        /* Keyframes for a full 360-degree rotation */
51        @keyframes rotate {
52            from {
53                transform: rotate(0deg);
54            }
55            to {
56                transform: rotate(360deg);
57            }
58        }
59    </style>
60</head>
61<body>
62    <div class="loader">
63        <div class="spinner"></div>
64    </div>
65</body>
66</html>