model output
Gemini 3 Flash Preview

SVG Loading icons
A 0.82T 0.26
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>Loading Animation</title>
7    <style>
8        /* Reset and Base Styles */
9        * {
10            margin: 0;
11            padding: 0;
12            box-sizing: border-box;
13        }
14
15        body {
16            background-color: #2c3338; /* Dark charcoal background from the video */
17            display: flex;
18            justify-content: center;
19            align-items: flex-start; /* Positioned towards the top as seen in frames */
20            min-height: 100vh;
21            padding-top: 15px;
22        }
23
24        /* Loader Container */
25        .loader {
26            display: flex;
27            align-items: center;
28            gap: 3px; /* Precise spacing between bars */
29            height: 20px;
30        }
31
32        /* Individual Bars */
33        .loader span {
34            display: block;
35            width: 3px;
36            height: 12px;
37            background-color: #f2711c; /* Distinct orange/coral color */
38            border-radius: 1px;
39            animation: equalizer 1s ease-in-out infinite;
40        }
41
42        /* Staggered Delays for the "wave" effect */
43        .loader span:nth-child(1) {
44            animation-delay: 0s;
45        }
46
47        .loader span:nth-child(2) {
48            animation-delay: 0.2s;
49        }
50
51        .loader span:nth-child(3) {
52            animation-delay: 0.4s;
53        }
54
55        /* Animation Keyframes */
56        @keyframes equalizer {
57            0%, 100% {
58                transform: scaleY(1);
59            }
60            50% {
61                transform: scaleY(2.2); /* Height fluctuates as seen in the 0.5s intervals */
62            }
63        }
64    </style>
65</head>
66<body>
67
68    <div class="loader">
69        <span></span>
70        <span></span>
71        <span></span>
72    </div>
73
74</body>
75</html>