model output
Gemini 3 Flash Preview

SVG Loading icons
A 0.89T 0.27
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>Bar Loader Animation</title>
7    <style>
8        /* 
9           Background matches the dark charcoal color in the video (#2c3338).
10           The content is positioned at the top center.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            background-color: #2c3338;
16            display: flex;
17            justify-content: center;
18            align-items: flex-start;
19            padding-top: 15px;
20            height: 100vh;
21            overflow: hidden;
22        }
23
24        /* Container for the three bars */
25        .loader {
26            display: flex;
27            align-items: flex-start;
28            gap: 3px; /* Precise spacing between bars */
29        }
30
31        /* 
32           The bars are orange (#ff6b00).
33           Using transform: scaleY for performance and smoothness.
34           Transform-origin: top ensures they grow downwards from the top edge.
35        */
36        .bar {
37            width: 4px;
38            height: 14px;
39            background-color: #ff6b00;
40            transform-origin: top;
41            animation: grow 1.2s ease-in-out infinite;
42        }
43
44        /* 
45           Staggered animation delays to create the wave/equalizer effect 
46           seen in the video frames.
47        */
48        .bar:nth-child(1) {
49            animation-delay: -1.0s;
50        }
51
52        .bar:nth-child(2) {
53            animation-delay: -0.8s;
54        }
55
56        .bar:nth-child(3) {
57            animation-delay: -0.6s;
58        }
59
60        /* 
61           Keyframes to oscillate height. 
62           In the video, the bars change height relative to each other.
63        */
64        @keyframes grow {
65            0%, 100% {
66                transform: scaleY(0.4);
67            }
68            50% {
69                transform: scaleY(1.1);
70            }
71        }
72    </style>
73</head>
74<body>
75
76    <div class="loader">
77        <div class="bar"></div>
78        <div class="bar"></div>
79        <div class="bar"></div>
80    </div>
81
82</body>
83</html>