model output
Gemini 3 Flash Preview

CSS3 loading animations
A 0.86T 0.26
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>Staggered Bar Loader</title>
7    <style>
8        /* Reset and layout */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            background-color: #121212; /* Dark background from video */
18            overflow: hidden;
19        }
20
21        /* Container for the bars */
22        .loader {
23            display: flex;
24            gap: 4px; /* Spacing between bars */
25            align-items: flex-start; /* Align to the top as seen in the video */
26            height: 30px; /* Constraints for the bars */
27        }
28
29        /* Individual bar styles */
30        .bar {
31            width: 6px;
32            height: 24px;
33            background-color: #a0b0c0; /* The light blue/gray color */
34            border-radius: 1px;
35            
36            /* Apply animation */
37            animation: pulse 1.2s ease-in-out infinite;
38            transform-origin: top; /* Animates from the top down */
39        }
40
41        /* Stagger the animation timing to create the wave effect */
42        .bar:nth-child(1) {
43            animation-delay: 0s;
44        }
45
46        .bar:nth-child(2) {
47            animation-delay: 0.15s;
48        }
49
50        .bar:nth-child(3) {
51            animation-delay: 0.3s;
52        }
53
54        /* Keyframes for the height/scaling animation */
55        @keyframes pulse {
56            0%, 100% {
57                transform: scaleY(1);
58                opacity: 1;
59            }
60            50% {
61                transform: scaleY(0.35); /* Shrinks to roughly 1/3 size */
62                opacity: 0.8; /* Slight dimming as it moves */
63            }
64        }
65
66        /* Responsive scaling */
67        @media (max-width: 600px) {
68            .bar {
69                width: 4px;
70                height: 18px;
71            }
72            .loader {
73                gap: 3px;
74            }
75        }
76    </style>
77</head>
78<body>
79
80    <div class="loader">
81        <div class="bar"></div>
82        <div class="bar"></div>
83        <div class="bar"></div>
84    </div>
85
86    <script>
87        /**
88         * The animation is purely CSS-driven for performance and smoothness,
89         * matching the 1.2s loop cycle and the staggered transformation
90         * observed in the video frames.
91         */
92    </script>
93</body>
94</html>