Gemini 3 Flash Preview

Tiny Single Element Loading Animations
A 0.71T 0.22
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>Blinking Dash Animation</title>
7    <style>
8        /* Reset and basic layout */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            background-color: #ffffff;
15            display: flex;
16            align-items: flex-start;
17            justify-content: flex-start;
18        }
19
20        /* 
21           Container positioned at the top left as seen in the video frames.
22           Padding provides the margin from the edges.
23        */
24        .animation-container {
25            padding: 15px;
26            display: flex;
27            gap: 3px; /* Precise spacing between the two dashes */
28        }
29
30        /* 
31           Recreating the dash look from the video frames. 
32           The dashes are small, thin, and black.
33        */
34        .dash {
35            width: 6px;
36            height: 1px;
37            background-color: #000000;
38        }
39
40        /* 
41           The second dash blinks on and off.
42           Based on the frames:
43           00:00.000 -> Visible
44           00:00.500 -> Hidden
45           00:01.000 -> Visible
46           
47           This suggests a 1-second cycle with a 50% duty cycle.
48           Using steps(1) ensures an instant toggle rather than a fade.
49        */
50        .blinking {
51            animation: blink-step 1s steps(1) infinite;
52        }
53
54        @keyframes blink-step {
55            0% {
56                opacity: 1;
57            }
58            50% {
59                opacity: 0;
60            }
61            100% {
62                opacity: 1;
63            }
64        }
65    </style>
66</head>
67<body>
68
69    <div class="animation-container">
70        <!-- The static first dash -->
71        <div class="dash"></div>
72        <!-- The blinking second dash -->
73        <div class="dash blinking"></div>
74    </div>
75
76</body>
77</html>