model output
Gemini 3 Flash Preview

CSS Spinners
A 0.88T 0.32
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>Circular Loader Animation</title>
7    <style>
8        /* 
9           Reset and Layout 
10        */
11        body, html {
12            margin: 0;
13            padding: 0;
14            width: 100%;
15            height: 100%;
16            display: flex;
17            flex-direction: column;
18            overflow: hidden;
19        }
20
21        /* 
22           Background Split: 
23           Top section is a deep purple/violet.
24           Bottom section is white.
25        */
26        .top-section {
27            background-color: #512da8; /* Deep Purple 700 */
28            flex: 1; /* Takes roughly 1/3 to 1/2 height based on video aspect */
29            display: flex;
30            justify-content: center;
31            align-items: center;
32            height: 33.33vh;
33        }
34
35        .bottom-section {
36            background-color: #ffffff;
37            flex: 2;
38            height: 66.67vh;
39        }
40
41        /* 
42           The Loader:
43           Consists of two thin, semi-transparent arcs rotating infinitely.
44        */
45        .loader {
46            width: 28px;
47            height: 28px;
48            border: 2px solid transparent;
49            /* Two opposing arcs created using left and right borders */
50            border-left-color: rgba(255, 255, 255, 0.4);
51            border-right-color: rgba(255, 255, 255, 0.4);
52            border-radius: 50%;
53            
54            /* Animation timing matches the smooth rotation in the video */
55            animation: spin 1.2s linear infinite;
56        }
57
58        /* 
59           Rotation Keyframes
60        */
61        @keyframes spin {
62            0% {
63                transform: rotate(0deg);
64            }
65            100% {
66                transform: rotate(360deg);
67            }
68        }
69    </style>
70</head>
71<body>
72
73    <div class="top-section">
74        <div class="loader"></div>
75    </div>
76
77    <div class="bottom-section"></div>
78
79</body>
80</html>