Gemini 3 Flash Preview

Tiny Single Element Loading Animations
A 0.85T 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>Loading Spinner Animation</title>
7    <style>
8        /* 
9           Analysis of the provided video:
10           - Object: A circular loading spinner (arc).
11           - Position: Top-left corner of the canvas.
12           - Color: Dark grey (#555) on a white background.
13           - Animation: Continuous 360-degree rotation.
14           - Timing: 1 full rotation approximately every 1 second (1.0s duration).
15           - Easing: Linear (constant speed).
16        */
17
18        body {
19            margin: 0;
20            padding: 30px; /* Aligns with the top-left positioning in the video frames */
21            background-color: #ffffff;
22            display: flex;
23            justify-content: flex-start;
24            align-items: flex-start;
25            height: 100vh;
26            overflow: hidden;
27        }
28
29        .spinner {
30            width: 22px;
31            height: 22px;
32            /* Creating the arc using borders */
33            border: 2px solid transparent;
34            border-top: 2px solid #555;
35            border-right: 2px solid #555; /* Extended arc to match the visual weight in frames */
36            border-radius: 50%;
37            
38            /* 1 second duration, linear timing, infinite loop */
39            animation: spin 1s linear infinite;
40            
41            /* Smoothing out the rendering */
42            -webkit-font-smoothing: antialiased;
43        }
44
45        @keyframes spin {
46            0% {
47                transform: rotate(0deg);
48            }
49            100% {
50                transform: rotate(360deg);
51            }
52        }
53    </style>
54</head>
55<body>
56
57    <!-- The Loading Spinner -->
58    <div class="spinner"></div>
59
60</body>
61</html>