model output
Gemini 3 Flash Preview

Wavy Loading Animations
A 0.67T 0.47
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>Wedge Wave Animation</title>
7    <style>
8        /* 
9           Background matches the light gray (#eeeeee) from the video.
10           Flexbox centers the animation container in the viewport.
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: #eeeeee;
20            overflow: hidden;
21        }
22
23        /* 
24           Container for the bars. 
25           'align-items: center' ensures bars scale from the middle outwards vertically.
26        */
27        .loader {
28            display: flex;
29            gap: 3px;
30            align-items: center;
31        }
32
33        /* 
34           Individual bars. 
35           Base size is small and square (3px x 3px).
36           Color is a dark gray (#333333).
37        */
38        .bar {
39            width: 3px;
40            height: 3px;
41            background-color: #333333;
42            border-radius: 0.5px;
43            /* 1.2s cycle matches the approximate speed in the video */
44            animation: wave 1.2s ease-in-out infinite;
45            transform-origin: center;
46        }
47
48        /* 
49           The 'wave' animation alternates height and opacity.
50           At 0% and 100%, bars are small and slightly transparent.
51           At 50%, bars reach peak height (scaleY(10)) and full opacity.
52        */
53        @keyframes wave {
54            0%, 100% {
55                transform: scaleY(1);
56                opacity: 0.3;
57            }
58            50% {
59                transform: scaleY(12);
60                opacity: 1;
61            }
62        }
63    </style>
64</head>
65<body>
66
67    <div class="loader" id="animation-container"></div>
68
69    <script>
70        /**
71         * Dynamically generates the bars and applies staggered delays 
72         * to create the wedge/wave effect observed in the video.
73         */
74        const container = document.getElementById('animation-container');
75        const barCount = 10; // Number of vertical segments seen in the video
76
77        for (let i = 0; i < barCount; i++) {
78            const bar = document.createElement('div');
79            bar.className = 'bar';
80            
81            /* 
82               Delay calculation:
83               (barCount - i) creates a right-to-left wave direction.
84               Multiplying by 0.08s provides the specific phase shift 
85               required to create the triangular "wedge" shape at certain timestamps.
86            */
87            const delay = (barCount - i) * 0.08;
88            bar.style.animationDelay = `${delay}s`;
89            
90            container.appendChild(bar);
91        }
92    </script>
93
94</body>
95</html>