model output
Gemini 3 Flash Preview

Loaders (WIP)
A 0.90T 0.35
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        /* Define the background and reset styles */
9        body {
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            background-color: #e84c3d; /* The specific reddish-orange color from the video */
17            overflow: hidden;
18            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
19        }
20
21        /* Container for the bars and text */
22        .loader-wrapper {
23            display: flex;
24            align-items: center;
25            gap: 20px; /* Space between the bars and the text */
26        }
27
28        /* Container for the two bars */
29        .bars-container {
30            display: flex;
31            flex-direction: column;
32            gap: 12px; /* Vertical spacing between the top and bottom bar */
33            align-items: flex-end; /* Ensures they grow outwards from the right edge next to the text */
34        }
35
36        /* Style for the individual bars */
37        .bar {
38            height: 3px;
39            background-color: white;
40            width: 2px; /* Starting width */
41            border-radius: 1px;
42            animation: growWidth 5s ease-in-out infinite alternate;
43        }
44
45        /* Style for the "LOADING ..." text */
46        .loading-text {
47            color: white;
48            font-size: 16px;
49            font-weight: 500;
50            letter-spacing: 3px;
51            text-transform: uppercase;
52            white-space: nowrap;
53        }
54
55        /* Keyframes for the bar expansion */
56        @keyframes growWidth {
57            0% {
58                width: 4px;
59            }
60            100% {
61                width: 150px; /* Expands to a much wider state as seen in the video */
62            }
63        }
64
65        /* Responsive adjustment for smaller screens */
66        @media (max-width: 400px) {
67            .loading-text {
68                font-size: 14px;
69                letter-spacing: 2px;
70            }
71            @keyframes growWidth {
72                0% { width: 4px; }
73                100% { width: 80px; }
74            }
75        }
76    </style>
77</head>
78<body>
79
80    <div class="loader-wrapper">
81        <div class="bars-container">
82            <div class="bar"></div>
83            <div class="bar"></div>
84        </div>
85        <div class="loading-text">Loading ...</div>
86    </div>
87
88    <script>
89        /**
90         * The animation is purely CSS-driven for performance and smoothness.
91         * The 'alternate' property in the animation allows it to shrink back
92         * smoothly after reaching its maximum width, creating a continuous loop.
93         */
94    </script>
95</body>
96</html>