model output
Gemini 3 Flash Preview

Wavy Loading Animations
A 0.71T 0.41
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 Animation</title>
7    <style>
8        /* Base styles to match the video's look and feel */
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: #efefef; /* Light gray background */
17            overflow: hidden;
18        }
19
20        /* Container for the bars */
21        .container {
22            display: flex;
23            align-items: center;
24            gap: 2px; /* Small spacing between bars */
25        }
26
27        /* Individual bar styles */
28        .bar {
29            width: 3px;
30            background-color: #333333; /* Dark gray/black bars */
31            border-radius: 1px;
32            /* Using transform-origin center to match the visual symmetry */
33            transform-origin: center;
34            /* Initial state */
35            transform: scaleY(0.1);
36            animation: wave 1.2s ease-in-out infinite alternate;
37        }
38
39        /* 
40           Keyframes: 
41           The bars grow from 10% of their height to 100%.
42           Since each bar has a different fixed height, the "slant" 
43           becomes more pronounced as they grow.
44        */
45        @keyframes wave {
46            0% {
47                transform: scaleY(0.1);
48                opacity: 0.3;
49            }
50            100% {
51                transform: scaleY(1);
52                opacity: 1;
53            }
54        }
55
56        /* 
57           Generating different heights and delays for each bar.
58           The heights increase linearly to create the diagonal top edge 
59           seen in the video.
60        */
61        .bar:nth-child(1)  { height: 12px; animation-delay: 0.0s; }
62        .bar:nth-child(2)  { height: 16px; animation-delay: 0.05s; }
63        .bar:nth-child(3)  { height: 20px; animation-delay: 0.1s; }
64        .bar:nth-child(4)  { height: 24px; animation-delay: 0.15s; }
65        .bar:nth-child(5)  { height: 28px; animation-delay: 0.2s; }
66        .bar:nth-child(6)  { height: 32px; animation-delay: 0.25s; }
67        .bar:nth-child(7)  { height: 36px; animation-delay: 0.3s; }
68        .bar:nth-child(8)  { height: 40px; animation-delay: 0.35s; }
69        .bar:nth-child(9)  { height: 44px; animation-delay: 0.4s; }
70        .bar:nth-child(10) { height: 48px; animation-delay: 0.45s; }
71        .bar:nth-child(11) { height: 52px; animation-delay: 0.5s; }
72        .bar:nth-child(12) { height: 56px; animation-delay: 0.55s; }
73
74    </style>
75</head>
76<body>
77
78    <div class="container">
79        <!-- 12 bars to match the visual density in the video -->
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 class="bar"></div>
87        <div class="bar"></div>
88        <div class="bar"></div>
89        <div class="bar"></div>
90        <div class="bar"></div>
91        <div class="bar"></div>
92    </div>
93
94    <script>
95        /**
96         * The animation is purely CSS-driven to ensure maximum performance 
97         * and smoothness, matching the ease-in-out transition from the video.
98         * The delay and height increments create the "rolling" slanted effect.
99         */
100    </script>
101</body>
102</html>