model output
Gemini 3 Flash Preview

SVG Loading icons
A 0.88T 0.29
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        /* 
9           Background color matches the dark charcoal gray of the video (#2c3136).
10           The layout uses flexbox to center the animation perfectly on the screen.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            background-color: #2c3136;
16            display: flex;
17            justify-content: center;
18            align-items: center;
19            height: 100vh;
20            overflow: hidden;
21        }
22
23        /* 
24           Container for the three bars.
25           Gap matches the tight spacing seen in the video.
26        */
27        .loader {
28            display: flex;
29            align-items: center;
30            justify-content: center;
31            gap: 3px;
32            height: 18px; /* Fixed height for the container */
33        }
34
35        /* 
36           Individual bar styling.
37           Color is the specific vibrant orange (#f37021).
38           Width and height are scaled to match the visual proportions.
39        */
40        .bar {
41            width: 3px;
42            height: 14px;
43            background-color: #f37021;
44            border-radius: 1px;
45            /* 
46               The animation lasts 1.2 seconds to match the slow pulse rhythm 
47               indicated by the 2-second cycle in the frames.
48            */
49            animation: barPulse 1.2s ease-in-out infinite;
50            transform-origin: center;
51        }
52
53        /* 
54           Staggering the animation for each bar.
55           The negative delays ensure the animation starts immediately in a specific state.
56        */
57        .bar:nth-child(1) {
58            animation-delay: -0.4s;
59        }
60
61        .bar:nth-child(2) {
62            animation-delay: -0.2s;
63        }
64
65        .bar:nth-child(3) {
66            animation-delay: 0s;
67        }
68
69        /* 
70           Keyframes recreate the vertical scaling effect.
71           The video shows the bars staying in a 'short' state for a significant portion 
72           of the time, so the scaleY(1) state is concentrated around the midpoint.
73        */
74        @keyframes barPulse {
75            0%, 100% {
76                transform: scaleY(0.4);
77                opacity: 0.8;
78            }
79            50% {
80                transform: scaleY(1);
81                opacity: 1;
82            }
83        }
84    </style>
85</head>
86<body>
87
88    <div class="loader">
89        <div class="bar"></div>
90        <div class="bar"></div>
91        <div class="bar"></div>
92    </div>
93
94</body>
95</html>