model output
Gemini 3 Flash Preview

Wavy Loading Animations
A 0.82T 0.45
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>Equalizer Animation</title>
7    <style>
8        /* Base styling to match the video background and center the element */
9        body {
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            background-color: #ededed; /* Light grey background from video */
17        }
18
19        .equalizer {
20            display: flex;
21            align-items: flex-end; /* Bars grow upwards from the bottom */
22            gap: 2px; /* Small gap between bars */
23            height: 30px; /* Container height defining the max bar height */
24        }
25
26        .bar {
27            width: 3px;
28            height: 100%;
29            background-color: #333333; /* Dark grey bar color */
30            transform-origin: bottom;
31            /* 
32               The animation uses scaleY for performance and keeps the bottom fixed.
33               Duration is set to 1.2s to match the timing of the wave cycles.
34            */
35            animation: equalize 1.2s ease-in-out infinite;
36            transform: scaleY(0.1);
37        }
38
39        /* 
40           Keyframes to oscillate height. 
41           At 0%, the bar is at its minimum height.
42           At 50%, the bar reaches its full height.
43        */
44        @keyframes equalize {
45            0%, 100% {
46                transform: scaleY(0.15);
47            }
48            50% {
49                transform: scaleY(1);
50            }
51        }
52
53        /* 
54           Staggered animation-delay creates the wave effect.
55           The sequence of delays (0.07s increments) ensures that at specific 
56           intervals, we see the ascending slope, descending slope, and pyramid peak.
57        */
58        .bar:nth-child(1) { animation-delay: -1.10s; }
59        .bar:nth-child(2) { animation-delay: -1.03s; }
60        .bar:nth-child(3) { animation-delay: -0.96s; }
61        .bar:nth-child(4) { animation-delay: -0.89s; }
62        .bar:nth-child(5) { animation-delay: -0.82s; }
63        .bar:nth-child(6) { animation-delay: -0.75s; }
64        .bar:nth-child(7) { animation-delay: -0.68s; }
65        .bar:nth-child(8) { animation-delay: -0.61s; }
66        .bar:nth-child(9) { animation-delay: -0.54s; }
67
68    </style>
69</head>
70<body>
71
72    <!-- 
73        Equalizer with 9 bars as observed in the video's pyramid peak 
74        (4 on each side, 1 in the center).
75    -->
76    <div class="equalizer">
77        <div class="bar"></div>
78        <div class="bar"></div>
79        <div class="bar"></div>
80        <div class="bar"></div>
81        <div class="bar"></div>
82        <div class="bar"></div>
83        <div class="bar"></div>
84        <div class="bar"></div>
85        <div class="bar"></div>
86    </div>
87
88</body>
89</html>