model output
Gemini 3 Flash Preview

flat loading animate
A 0.88T 0.13
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 Pulse Loader</title>
7    <style>
8        /* 
9           Resetting margins and centering the loader perfectly in the viewport.
10        */
11        body {
12            margin: 0;
13            padding: 0;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            height: 100vh;
18            background-color: #ffffff;
19            overflow: hidden;
20        }
21
22        /* 
23           The loader container holds the four dots.
24           Gap is set to match the spacing observed in the video.
25        */
26        .loader {
27            display: flex;
28            gap: 10px;
29        }
30
31        /* 
32           Individual dot styling.
33           Color matches the vibrant cyan/turquoise seen in the animation.
34        */
35        .dot {
36            width: 12px;
37            height: 12px;
38            background-color: #46C1D7;
39            border-radius: 50%;
40            /* 
41               The animation is a combination of opacity and scale 
42               to create the "pulsing wave" effect.
43            */
44            animation: dot-pulse 1.4s infinite ease-in-out;
45            /* Setting the default state to the start of the animation */
46            opacity: 0.3;
47            transform: scale(0.8);
48        }
49
50        /* 
51           Staggering the start time of each dot's animation 
52           to create the moving wave effect from left to right.
53        */
54        .dot:nth-child(1) { animation-delay: 0s; }
55        .dot:nth-child(2) { animation-delay: 0.2s; }
56        .dot:nth-child(3) { animation-delay: 0.4s; }
57        .dot:nth-child(4) { animation-delay: 0.6s; }
58
59        /* 
60           Keyframes define the pulse.
61           The dot is most prominent (opacity 1, scale 1) at the 40% mark.
62        */
63        @keyframes dot-pulse {
64            0%, 80%, 100% {
65                opacity: 0.3;
66                transform: scale(0.8);
67            }
68            40% {
69                opacity: 1;
70                transform: scale(1);
71            }
72        }
73    </style>
74</head>
75<body>
76
77    <div class="loader">
78        <div class="dot"></div>
79        <div class="dot"></div>
80        <div class="dot"></div>
81        <div class="dot"></div>
82    </div>
83
84</body>
85</html>