model output
Gemini 3 Flash Preview

Wavy Loading Animations
A 0.75T 0.31
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        /* Base styles to match the video environment */
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: #ebebeb; /* Light grey background from video */
18        }
19
20        /* Container for the loading bars */
21        .loader {
22            display: flex;
23            align-items: center;
24            justify-content: center;
25            gap: 2px; /* Small gap between bars */
26            height: 40px;
27        }
28
29        /* Individual bar styling */
30        .bar {
31            width: 3px;
32            height: 25px;
33            background-color: #555555; /* Dark grey color from video */
34            border-radius: 1px;
35            transform: scaleY(0.1); /* Start small */
36            animation: wave 1.2s ease-in-out infinite;
37        }
38
39        /* 
40           The wave animation:
41           Matching the "wedge" and "pulse" movement seen in the video.
42           The scale cycles from near-zero to full height.
43        */
44        @keyframes wave {
45            0%, 100% {
46                transform: scaleY(0.1);
47                opacity: 0.3;
48            }
49            50% {
50                transform: scaleY(1);
51                opacity: 1;
52            }
53        }
54
55        /* Staggering the animation delay for each bar to create the wave effect */
56        .bar:nth-child(1)  { animation-delay: 0.0s; }
57        .bar:nth-child(2)  { animation-delay: 0.1s; }
58        .bar:nth-child(3)  { animation-delay: 0.2s; }
59        .bar:nth-child(4)  { animation-delay: 0.3s; }
60        .bar:nth-child(5)  { animation-delay: 0.4s; }
61        .bar:nth-child(6)  { animation-delay: 0.5s; }
62        .bar:nth-child(7)  { animation-delay: 0.6s; }
63        .bar:nth-child(8)  { animation-delay: 0.7s; }
64        .bar:nth-child(9)  { animation-delay: 0.8s; }
65        .bar:nth-child(10) { animation-delay: 0.9s; }
66        .bar:nth-child(11) { animation-delay: 1.0s; }
67        .bar:nth-child(12) { animation-delay: 1.1s; }
68
69    </style>
70</head>
71<body>
72
73    <div class="loader">
74        <div class="bar"></div>
75        <div class="bar"></div>
76        <div class="bar"></div>
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>