Gemini 3 Flash Preview

Tiny Single Element Loading Animations
A 0.93T 0.24
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>Pulsing Dot Animation</title>
7    <style>
8        /* Reset and layout */
9        body {
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: flex-start;
14            align-items: flex-start;
15            height: 100vh;
16            background-color: #ffffff;
17        }
18
19        /* Container for precise positioning */
20        .container {
21            padding: 40px; /* Adjusts the dot's distance from the top-left corner */
22        }
23
24        /* The Dot */
25        .dot {
26            width: 11px;
27            height: 11px;
28            background-color: #d1d1d1; /* The specific light gray from the video */
29            border-radius: 50%;
30            
31            /* 
32               The animation cycle is 1.5 seconds.
33               Based on the frames:
34               0.0s: Visible
35               0.5s: Fading/Faint
36               1.0s: Invisible
37               1.5s: Re-appears (Loop starts)
38            */
39            animation: pulse-fade 1.5s infinite ease-in-out;
40        }
41
42        @keyframes pulse-fade {
43            0% {
44                opacity: 1;
45            }
46            /* The dot fades out by the 0.5s mark and stays hidden through the 1.0s mark */
47            45% {
48                opacity: 0;
49            }
50            75% {
51                opacity: 0;
52            }
53            /* Re-appears fully by the end of the 1.5s duration */
54            100% {
55                opacity: 1;
56            }
57        }
58    </style>
59</head>
60<body>
61    <div class="container">
62        <div class="dot"></div>
63    </div>
64</body>
65</html>