model output
Gemini 3 Flash Preview

CSS3 loading animations
A 0.84T 0.28
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>Audio Visualizer Loader</title>
7    <style>
8        /* 
9           Background matches the deep charcoal/black of the video (#121212)
10        */
11        body {
12            background-color: #121212;
13            margin: 0;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            height: 100vh;
18            overflow: hidden;
19        }
20
21        /* 
22           Container for the bars. 
23           Using flexbox to align them horizontally and center them vertically.
24        */
25        .loader {
26            display: flex;
27            align-items: center;
28            justify-content: center;
29            gap: 3px; /* Precise spacing between bars */
30        }
31
32        /* 
33           The individual bars.
34           Color is a muted gray (~#555) to match the semi-transparent look in the video.
35        */
36        .loader span {
37            display: block;
38            width: 3px;
39            height: 22px;
40            background-color: #555555;
41            border-radius: 2px;
42            /* 
43               The animation uses scaleY which is more performant than animating height. 
44               The duration and ease-in-out create that smooth fluid motion.
45            */
46            animation: wave 1.2s ease-in-out infinite;
47            transform-origin: center;
48        }
49
50        /* 
51           Staggering the delays creates the 'wave' effect. 
52           Each bar is delayed by 0.1s relative to the previous one.
53        */
54        .loader span:nth-child(1) { animation-delay: 0.0s; }
55        .loader span:nth-child(2) { animation-delay: 0.1s; }
56        .loader span:nth-child(3) { animation-delay: 0.2s; }
57        .loader span:nth-child(4) { animation-delay: 0.3s; }
58        .loader span:nth-child(5) { animation-delay: 0.4s; }
59
60        /* 
61           Keyframes: The bars oscillate between approximately 50% and 150% of their base height.
62           Matching the timing seen in the video where the wave rolls across the 5 bars.
63        */
64        @keyframes wave {
65            0%, 100% {
66                transform: scaleY(0.5);
67                opacity: 0.6;
68            }
69            50% {
70                transform: scaleY(1.4);
71                opacity: 1;
72            }
73        }
74    </style>
75</head>
76<body>
77
78    <div class="loader">
79        <span></span>
80        <span></span>
81        <span></span>
82        <span></span>
83        <span></span>
84    </div>
85
86</body>
87</html>