model output
Gemini 3 Flash Preview

CSS3 loading animations
A 0.78T 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>Teal Loading Spinner</title>
7    <style>
8        /* Base styles to match the video background */
9        body {
10            margin: 0;
11            padding: 0;
12            background-color: #111111; /* Dark charcoal background */
13            display: flex;
14            justify-content: center;
15            align-items: flex-start; /* Positioned at the top */
16            height: 100vh;
17            overflow: hidden;
18        }
19
20        /* Container to handle the positioning offset from the top */
21        .loader-container {
22            margin-top: 15px;
23        }
24
25        /* The spinner recreation */
26        .spinner {
27            width: 20px;
28            height: 20px;
29            /* Creates the two arc segments using transparent borders */
30            border: 2.5px solid transparent;
31            border-top: 2.5px solid #14a098;    /* Teal color observed in video */
32            border-bottom: 2.5px solid #14a098; /* Teal color observed in video */
33            border-radius: 50%;
34            
35            /* Timing: Based on video analysis, it completes a full rotation every 2 seconds */
36            animation: rotate-spinner 2s linear infinite;
37            
38            /* Subtle glow to match the video's lighting */
39            box-shadow: 0 0 1px rgba(20, 160, 152, 0.5);
40            filter: drop-shadow(0 0 1px rgba(20, 160, 152, 0.3));
41        }
42
43        /* Rotation keyframes */
44        @keyframes rotate-spinner {
45            from {
46                transform: rotate(0deg);
47            }
48            to {
49                transform: rotate(360deg);
50            }
51        }
52    </style>
53</head>
54<body>
55
56    <div class="loader-container">
57        <div class="spinner"></div>
58    </div>
59
60    <script>
61        /**
62         * The animation is handled entirely via CSS for performance and accuracy 
63         * in matching the constant linear rotation observed in the video.
64         * 
65         * Duration: 2000ms (2 seconds) per full rotation.
66         * Color: Teal (#14a098).
67         * Easing: Linear (no acceleration/deceleration).
68         */
69    </script>
70</body>
71</html>