model output
Gemini 3 Flash Preview

CSS Spinners
A 0.89T 0.29
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>Rotating Spinner 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            flex-direction: column;
16            background-color: #ffffff;
17            overflow: hidden;
18        }
19
20        /* Top orange section */
21        .header {
22            background-color: #e64a19; /* Vibrant orange color matching the video */
23            height: 33.33%; /* Approximately 1/3 of the screen height */
24            width: 100%;
25            display: flex;
26            justify-content: center;
27            align-items: center;
28            position: relative;
29        }
30
31        /* Bottom white section */
32        .content {
33            background-color: #ffffff;
34            flex-grow: 1;
35            width: 100%;
36        }
37
38        /* The rotating crescent/spinner */
39        .spinner {
40            width: 32px;
41            height: 32px;
42            border: 1.5px solid transparent;
43            /* Creates a thin arc effect by coloring only one side */
44            border-top: 1.5px solid rgba(0, 0, 0, 0.4); 
45            border-radius: 50%;
46            animation: rotate 1s linear infinite;
47        }
48
49        /* Continuous rotation animation */
50        @keyframes rotate {
51            from {
52                transform: rotate(0deg);
53            }
54            to {
55                transform: rotate(360deg);
56            }
57        }
58
59        /* Responsive adjustments */
60        @media (max-width: 600px) {
61            .header {
62                height: 30%;
63            }
64        }
65    </style>
66</head>
67<body>
68
69    <div class="header">
70        <!-- The small rotating element seen in the video -->
71        <div class="spinner"></div>
72    </div>
73    
74    <div class="content"></div>
75
76</body>
77</html>