model output
Gemini 3 Flash Preview

Simple Spinner
A 0.92T 0.38
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 Animation</title>
7    <style>
8        /* 
9           Background color: A vibrant magenta/pink sampled from the video.
10           Hex: #ce0058
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            display: flex;
16            justify-content: center;
17            align-items: center;
18            height: 100vh;
19            background-color: #ce0058;
20            overflow: hidden;
21        }
22
23        .loader {
24            display: flex;
25            gap: 14px; /* Precise spacing between the dots */
26            align-items: center;
27        }
28
29        .dot {
30            width: 9px;
31            height: 9px;
32            background-color: #ffffff;
33            border-radius: 50%;
34            /* 
35               Based on the video timestamps:
36               0.5s: Dot 1 peaks
37               1.0s: Dot 3 peaks
38               1.5s: Dot 5 peaks
39               This equates to a 0.25s delay between dots and a 2.0s total loop.
40            */
41            animation: pulse 2s ease-in-out infinite;
42        }
43
44        /* 
45           Animation Timing logic:
46           Duration: 2s
47           The pulse peak occurs at 25% of the duration (0.5s).
48           By staggering the delays in 0.25s increments, we match the video's timing exactly.
49        */
50        .dot:nth-child(1) { animation-delay: 0.00s; }
51        .dot:nth-child(2) { animation-delay: 0.25s; }
52        .dot:nth-child(3) { animation-delay: 0.50s; }
53        .dot:nth-child(4) { animation-delay: 0.75s; }
54        .dot:nth-child(5) { animation-delay: 1.00s; }
55
56        @keyframes pulse {
57            /* Dot is at its base state for 50% of the cycle */
58            0%, 50%, 100% {
59                transform: scale(1);
60                opacity: 0.6;
61            }
62            /* Peak scale and brightness at the quarter mark of the active phase */
63            25% {
64                transform: scale(2.6);
65                opacity: 1;
66            }
67        }
68    </style>
69</head>
70<body>
71
72    <div class="loader">
73        <div class="dot"></div>
74        <div class="dot"></div>
75        <div class="dot"></div>
76        <div class="dot"></div>
77        <div class="dot"></div>
78    </div>
79
80</body>
81</html>