model output
Gemini 3 Flash Preview

Spinners using Font Icons
A 0.80T 0.33
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>Spinner Animation</title>
7    <style>
8        /* 
9           Background: Dark charcoal/black color as seen in the video.
10           The layout uses flex to center horizontally and padding to 
11           place the spinner at the top 10% of the screen.
12        */
13        body {
14            background-color: #121212;
15            margin: 0;
16            display: flex;
17            justify-content: center;
18            align-items: flex-start;
19            height: 100vh;
20            padding-top: 10vh; /* Matches the top positioning in the video */
21            overflow: hidden;
22        }
23
24        /* Container for the spinner elements */
25        .loader-container {
26            position: relative;
27            width: 32px;
28            height: 32px;
29        }
30
31        /* 
32           The Outer Ring: 
33           It consists of a faint background circle and a 
34           three-quarter white arc (achieved by setting 3 border sides).
35        */
36        .spinner-ring {
37            width: 100%;
38            height: 100%;
39            border-radius: 50%;
40            /* Semi-transparent base ring */
41            border: 3px solid rgba(255, 255, 255, 0.15);
42            /* Highlighted 270-degree arc */
43            border-top-color: #ffffff;
44            border-left-color: #ffffff;
45            border-bottom-color: #ffffff;
46            box-sizing: border-box;
47            
48            /* Glow effect to match the video's lighting */
49            filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
50            
51            /* Continuous rotation: 1 full turn per second */
52            animation: spin 1s linear infinite;
53        }
54
55        /* 
56           Inner Dot:
57           A static small white circle in the center of the ring.
58        */
59        .center-dot {
60            position: absolute;
61            top: 50%;
62            left: 50%;
63            width: 5px;
64            height: 5px;
65            background-color: #ffffff;
66            border-radius: 50%;
67            transform: translate(-50%, -50%);
68            /* Subtle glow for the center dot */
69            box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
70        }
71
72        /* Rotation keyframes */
73        @keyframes spin {
74            0% {
75                transform: rotate(0deg);
76            }
77            100% {
78                transform: rotate(360deg);
79            }
80        }
81    </style>
82</head>
83<body>
84
85    <div class="loader-container">
86        <!-- The rotating outer arc -->
87        <div class="spinner-ring"></div>
88        <!-- The static center point -->
89        <div class="center-dot"></div>
90    </div>
91
92</body>
93</html>