model output
Gemini 3 Flash Preview

CSS3 loading animations
A 0.87T 0.14
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 Loading Animation</title>
7    <style>
8        /* 
9           Matching the dark background of the video. 
10           The video has a very subtle dark gray tint.
11        */
12        body {
13            background-color: #111111;
14            margin: 0;
15            display: flex;
16            justify-content: center;
17            align-items: flex-start; /* Dots are positioned at the top */
18            height: 100vh;
19            padding-top: 20px; /* Slight offset from top like in the video */
20            overflow: hidden;
21        }
22
23        /* Container for the 5 dots */
24        .container {
25            display: flex;
26            gap: 4px; /* Tight spacing between dots */
27        }
28
29        /* 
30           Base dot style: 
31           Small, dark gray/black circles.
32        */
33        .dot {
34            width: 4px;
35            height: 4px;
36            background-color: #2a2a2a; /* Dim inactive color */
37            border-radius: 50%;
38            /* 
39               Animation settings:
40               - fill-mode: forwards ensures they stay blue once the animation hits 100%.
41               - Duration: 0.1s for a quick 'snappy' color change as seen in the frames.
42            */
43            animation: lightUp 0.1s forwards;
44            animation-play-state: paused; /* Initially paused */
45        }
46
47        /* 
48           The keyframes transition from the dim gray to a bright blue.
49        */
50        @keyframes lightUp {
51            0% {
52                background-color: #2a2a2a;
53            }
54            100% {
55                background-color: #4dabf7; /* Bright blue color from the video */
56                box-shadow: 0 0 2px rgba(77, 171, 247, 0.5); /* Subtle glow */
57            }
58        }
59
60        /* 
61           Precise timing based on the video timestamps:
62           00:01.000 -> Dot 1
63           00:01.500 -> Dot 2
64           00:02.000 -> Dot 3
65           00:02.500 -> Dot 4
66           00:03.000 -> Dot 5
67        */
68        .dot:nth-child(1) { animation-delay: 1.0s; }
69        .dot:nth-child(2) { animation-delay: 1.5s; }
70        .dot:nth-child(3) { animation-delay: 2.0s; }
71        .dot:nth-child(4) { animation-delay: 2.5s; }
72        .dot:nth-child(5) { animation-delay: 3.0s; }
73
74        /* Start the animation once the page is ready */
75        .dot {
76            animation-play-state: running;
77        }
78
79    </style>
80</head>
81<body>
82
83    <div class="container">
84        <div class="dot"></div>
85        <div class="dot"></div>
86        <div class="dot"></div>
87        <div class="dot"></div>
88        <div class="dot"></div>
89    </div>
90
91    <script>
92        /**
93         * The animation is primarily CSS-based for performance and accuracy.
94         * To match the video's behavior (staying lit after 3 seconds), 
95         * 'animation-fill-mode: forwards' is used.
96         * 
97         * If you want the animation to loop indefinitely after the 7-second 
98         * duration of the video, you could uncomment the logic below:
99         */
100        
101        /*
102        setInterval(() => {
103            const dots = document.querySelectorAll('.dot');
104            dots.forEach(dot => {
105                dot.style.animation = 'none';
106                dot.offsetHeight; // trigger reflow
107                dot.style.animation = null;
108            });
109        }, 7000); 
110        */
111    </script>
112</body>
113</html>