model output
Gemini 3 Flash Preview

Simple Spinner
A 0.92T 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>Simple Loading Spinner</title>
7    <style>
8        /* Reset and center container */
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            /* Matches the vibrant orange background from the video */
18            background-color: #ffa500;
19            overflow: hidden;
20        }
21
22        /* The loader ring */
23        .loader {
24            width: 48px;
25            height: 48px;
26            border-radius: 50%;
27            display: inline-block;
28            position: relative;
29            /* The pale/transparent base ring */
30            border: 4px solid rgba(255, 255, 255, 0.3);
31            box-sizing: border-box;
32            /* The red spinning segment */
33            border-top-color: #d32f2f;
34            /* 1 second duration, linear timing for smooth continuous loop */
35            animation: spin 1s linear infinite;
36        }
37
38        /* Rotation keyframes */
39        @keyframes spin {
40            0% {
41                transform: rotate(0deg);
42            }
43            100% {
44                transform: rotate(360deg);
45            }
46        }
47
48        /* Optional: Adding a slight 'glow' or softness if visible in high-res */
49        .loader::after {
50            content: '';  
51            box-sizing: border-box;
52            position: absolute;
53            left: 0;
54            top: 0;
55            width: 48px;
56            height: 48px;
57            border-radius: 50%;
58            /* Subtle adjustment to match the anti-aliasing look of the video */
59            border: 4px solid transparent;
60            border-top-color: rgba(211, 47, 47, 0.2);
61            filter: blur(1px);
62        }
63    </style>
64</head>
65<body>
66
67    <div class="loader"></div>
68
69</body>
70</html>