model output
Gemini 3 Flash Preview

CSS Spinners
A 0.91T 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>Loading Spinner Animation</title>
7    <style>
8        /* Reset and layout */
9        body, html {
10            margin: 0;
11            padding: 0;
12            height: 100%;
13            width: 100%;
14            display: flex;
15            flex-direction: column;
16            overflow: hidden;
17            background-color: #ffffff;
18        }
19
20        /* Top red section (approx 1/3 of the screen) */
21        .header {
22            background-color: #db3236;
23            height: 32.5%;
24            width: 100%;
25            display: flex;
26            justify-content: center;
27            align-items: center;
28        }
29
30        /* Bottom white section */
31        .content {
32            flex-grow: 1;
33            background-color: #ffffff;
34        }
35
36        /* Spinner styling */
37        .spinner {
38            width: 26px;
39            height: 26px;
40            /* Creates a thin circular arc */
41            border: 1.5px solid rgba(0, 0, 0, 0.1);
42            border-top: 1.5px solid rgba(0, 0, 0, 0.35);
43            border-radius: 50%;
44            
45            /* Animation matching the video timing (approx 0.8s per rotation) */
46            animation: spin 0.8s linear infinite;
47        }
48
49        /* Rotation animation */
50        @keyframes spin {
51            0% {
52                transform: rotate(0deg);
53            }
54            100% {
55                transform: rotate(360deg);
56            }
57        }
58    </style>
59</head>
60<body>
61
62    <!-- Red header with centering for the spinner -->
63    <div class="header">
64        <div class="spinner"></div>
65    </div>
66
67    <!-- Empty white section below -->
68    <div class="content"></div>
69
70    <script>
71        /**
72         * The animation is purely CSS-driven to match the video's 
73         * continuous, linear rotation. No JavaScript interaction 
74         * is required for the baseline visual recreation.
75         */
76    </script>
77</body>
78</html>