Gemini 3 Flash Preview

Tiny Single Element Loading Animations
A 0.84T 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>CSS Spinner Animation</title>
7    <style>
8        /* 
9           Styling to match the provided video frames:
10           - White background
11           - Small, thin-bordered circle in the top-left area
12           - Smooth continuous rotation
13        */
14        body {
15            margin: 0;
16            padding: 0;
17            background-color: #ffffff;
18            display: flex;
19            justify-content: flex-start;
20            align-items: flex-start;
21            height: 100vh;
22            width: 100vw;
23            overflow: hidden;
24        }
25
26        .container {
27            /* Positioning the element in the top-left corner as seen in the video */
28            padding: 25px;
29        }
30
31        .spinner {
32            /* Geometric properties */
33            width: 18px;
34            height: 18px;
35            border-radius: 50%;
36            
37            /* Border styling: 
38               - A light gray base for the full circle 
39               - A darker top border to create the rotating segment effect
40            */
41            border: 1.5px solid #f0f0f0;
42            border-top: 1.5px solid #555555;
43            
44            /* Animation timing:
45               - Linear timing for constant speed
46               - 1 second per full rotation matches the frame transitions
47            */
48            animation: spin 1s linear infinite;
49        }
50
51        @keyframes spin {
52            from {
53                transform: rotate(0deg);
54            }
55            to {
56                transform: rotate(360deg);
57            }
58        }
59    </style>
60</head>
61<body>
62
63    <div class="container">
64        <div class="spinner"></div>
65    </div>
66
67</body>
68</html>