Gemini 3 Flash Preview

Tiny Single Element Loading Animations
A 0.94T 0.32
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>Dot Animation</title>
7  <style>
8    /* Reset and layout */
9    body {
10      margin: 0;
11      padding: 20px;
12      background-color: #ffffff;
13      display: flex;
14      justify-content: flex-start;
15      align-items: flex-start;
16      height: 100vh;
17      overflow: hidden;
18    }
19
20    /* Container for the three dots */
21    .typing-indicator {
22      display: flex;
23      gap: 3px; /* Precise spacing between dots */
24      padding: 4px;
25    }
26
27    /* Individual dot styling */
28    .dot {
29      width: 3px; /* Small dot size matching the minimalist video style */
30      height: 3px;
31      background-color: #444; /* Dark grey color */
32      border-radius: 50%;
33      /* Animation: duration, timing-function, infinite loop */
34      animation: typing-animation 1.4s infinite ease-in-out;
35    }
36
37    /* Staggered animation delays for a sequential wave effect */
38    .dot:nth-child(1) {
39      animation-delay: 0s;
40    }
41
42    .dot:nth-child(2) {
43      animation-delay: 0.2s;
44    }
45
46    .dot:nth-child(3) {
47      animation-delay: 0.4s;
48    }
49
50    /* Keyframes for the pulsing opacity effect observed in the frames */
51    @keyframes typing-animation {
52      0%, 80%, 100% {
53        opacity: 0.3;
54        transform: scale(1);
55      }
56      40% {
57        opacity: 1;
58        transform: scale(1.1); /* Subtle scale up at peak opacity */
59      }
60    }
61  </style>
62</head>
63<body>
64
65  <div class="typing-indicator">
66    <div class="dot"></div>
67    <div class="dot"></div>
68    <div class="dot"></div>
69  </div>
70
71</body>
72</html>