model output
Gemini 3 Flash Preview

CSS3 loading animations
A 0.79T 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>Cyan Loading Spinner</title>
7    <style>
8        /* 
9           Background matches the deep charcoal/black of the video 
10        */
11        body {
12            margin: 0;
13            padding: 0;
14            background-color: #0d0d0d;
15            display: flex;
16            justify-content: center;
17            /* Positioning the loader near the top as seen in the video frames */
18            align-items: flex-start;
19            padding-top: 80px; 
20            height: 100vh;
21            overflow: hidden;
22        }
23
24        /* 
25           The main spinner container.
26           Size and styling match the tech-style cyan loader.
27        */
28        .loader-container {
29            position: relative;
30            width: 36px;
31            height: 36px;
32        }
33
34        /* 
35           The spinning ring. 
36           Uses dual arcs (top and bottom) to recreate the specific 
37           segmented look from the video frames.
38        */
39        .spinner {
40            width: 100%;
41            height: 100%;
42            border: 3px solid transparent;
43            /* Vibrant Cyan color from the video frames */
44            border-top: 3px solid #00aeef;
45            border-bottom: 3px solid #00aeef;
46            border-radius: 50%;
47            
48            /* 
49               The glow effect. 
50               Combining drop-shadow and box-shadow for that soft 'neon' feel.
51            */
52            filter: drop-shadow(0 0 4px rgba(0, 174, 239, 0.6));
53            box-shadow: inset 0 0 4px rgba(0, 174, 239, 0.2);
54            
55            /* Timing matches the smooth, continuous rotation */
56            animation: spin 1.2s linear infinite;
57        }
58
59        /* 
60           Subtle 'track' ring behind the spinner (optional but adds 
61           to the high-fidelity recreation of tech loaders).
62        */
63        .spinner-track {
64            position: absolute;
65            top: 0;
66            left: 0;
67            width: 100%;
68            height: 100%;
69            border: 3px solid rgba(0, 174, 239, 0.08);
70            border-radius: 50%;
71            box-sizing: border-box;
72        }
73
74        /* Essential for border calculation */
75        .spinner {
76            box-sizing: border-box;
77        }
78
79        /* 
80           Animation: Continuous 360 degree rotation 
81        */
82        @keyframes spin {
83            0% {
84                transform: rotate(0deg);
85            }
86            100% {
87                transform: rotate(360deg);
88            }
89        }
90
91        /* Adding a pulse effect to the glow to match the 'shimmer' in the video */
92        @keyframes glow-pulse {
93            0%, 100% { opacity: 0.8; }
94            50% { opacity: 1; }
95        }
96
97        .loader-container {
98            animation: glow-pulse 2s ease-in-out infinite;
99        }
100
101    </style>
102</head>
103<body>
104
105    <div class="loader-container">
106        <div class="spinner-track"></div>
107        <div class="spinner"></div>
108    </div>
109
110</body>
111</html>