model output
Gemini 3 Flash Preview

SVG Loading icons
A 0.92T 0.25
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           Analysis of the provided frames:
10           - Background: Dark charcoal grey (#2c3338).
11           - Bar color: Vibrant orange (#f07c1b).
12           - Layout: Three vertical bars centered in the viewport.
13           - Sequence: 
14             0.0s: Middle bar is tall, others short.
15             0.5s: Right bar is tall, others short.
16             1.0s: Left bar is tall, others short.
17             1.5s: Cycle repeats (Middle tall).
18           - Total Cycle Duration: 1.5 seconds.
19        */
20
21        body {
22            margin: 0;
23            padding: 0;
24            display: flex;
25            justify-content: center;
26            align-items: center;
27            height: 100vh;
28            background-color: #2c3338;
29        }
30
31        .loader-container {
32            display: flex;
33            align-items: center;
34            justify-content: center;
35            gap: 4px; /* Space between the orange bars */
36        }
37
38        .bar {
39            width: 3px;
40            height: 7px; /* Base height */
41            background-color: #f07c1b;
42            border-radius: 1px;
43            animation: pulse 1.5s ease-in-out infinite;
44        }
45
46        /* 
47           To match the video frames:
48           At 0.0s, the Middle bar is at its peak.
49           At 0.5s, the Right bar is at its peak.
50           At 1.0s, the Left bar is at its peak.
51        */
52
53        /* Bar 1 (Left): Peak at 1.0s */
54        .bar:nth-child(1) {
55            animation-delay: -1.25s;
56        }
57
58        /* Bar 2 (Middle): Peak at 0s */
59        .bar:nth-child(2) {
60            animation-delay: -0.75s;
61        }
62
63        /* Bar 3 (Right): Peak at 0.5s */
64        .bar:nth-child(3) {
65            animation-delay: -0.25s;
66        }
67
68        @keyframes pulse {
69            0%, 100% {
70                transform: scaleY(1);
71            }
72            50% {
73                /* Bars grow to approximately double their size */
74                transform: scaleY(2.4);
75            }
76        }
77    </style>
78</head>
79<body>
80
81    <div class="loader-container">
82        <div class="bar"></div>
83        <div class="bar"></div>
84        <div class="bar"></div>
85    </div>
86
87</body>
88</html>