model output
Gemini 3 Flash Preview

Loaders (WIP)
A 0.84T 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>Loading Animation</title>
7    <style>
8        /* Define the primary colors from the video */
9        :root {
10            --bg-color: #e85444;       /* The red-orange background */
11            --faint-white: rgba(255, 255, 255, 0.4); /* Faint text color */
12            --white: #ffffff;           /* Highlight bar color */
13        }
14
15        * {
16            margin: 0;
17            padding: 0;
18            box-sizing: border-box;
19        }
20
21        body {
22            background-color: var(--bg-color);
23            height: 100vh;
24            display: flex;
25            justify-content: center;
26            align-items: center;
27            overflow: hidden;
28            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
29        }
30
31        /* Container for the loading bar */
32        .loader-container {
33            position: relative;
34            padding: 10px 0;
35            cursor: default;
36            user-select: none;
37        }
38
39        /* The text styling used for both layers */
40        .text-style {
41            font-size: 14px;
42            font-weight: 600;
43            letter-spacing: 0.15em;
44            white-space: nowrap;
45            padding: 2px 0;
46        }
47
48        /* Bottom layer: Faint white text that is always present */
49        .text-bg {
50            color: var(--faint-white);
51        }
52
53        /* Top layer: The sliding white box */
54        .white-bar {
55            position: absolute;
56            top: 0;
57            left: 0;
58            height: 100%;
59            background-color: var(--white);
60            overflow: hidden; /* Clips the inner text to the bar's width */
61            
62            /* Animation timing matches the video sequence */
63            /* Total duration 5s: ~0.5s start, 2.5s fill, 1s hold, 1s drain */
64            animation: slide-reveal 5s ease-in-out infinite;
65        }
66
67        /* The text inside the white box: colored the same as the background */
68        .text-fg {
69            color: var(--bg-color);
70            position: absolute;
71            left: 0;
72            top: 50%;
73            transform: translateY(-50%);
74            /* Ensure the text doesn't wrap or shrink as the parent bar resizes */
75            width: max-content; 
76        }
77
78        /* 
79           Animation logic:
80           0-10%: Idle (start at 0.5s mark of 5s)
81           10-50%: The right edge moves to the right (Fill)
82           50-70%: The bar stays full (Hold)
83           70-90%: The left edge moves to the right (Drain)
84           90-100%: Idle at the end
85        */
86        @keyframes slide-reveal {
87            0%, 10% {
88                left: 0;
89                width: 0;
90            }
91            50%, 70% {
92                left: 0;
93                width: 100%;
94            }
95            90%, 100% {
96                left: 100%;
97                width: 0;
98            }
99        }
100
101    </style>
102</head>
103<body>
104
105    <div class="loader-container">
106        <!-- Static background text -->
107        <div class="text-style text-bg">| LOADING ... |</div>
108        
109        <!-- Animated overlay bar -->
110        <div class="white-bar">
111            <!-- Foreground text revealed inside the bar -->
112            <div class="text-style text-fg">| LOADING ... |</div>
113        </div>
114    </div>
115
116    <script>
117        // Ensure the foreground text width perfectly matches the container width
118        // for accurate alignment during the "drain" phase of the animation.
119        window.addEventListener('load', () => {
120            const bgText = document.querySelector('.text-bg');
121            const fgText = document.querySelector('.text-fg');
122            const container = document.querySelector('.loader-container');
123            
124            const updateWidth = () => {
125                const width = bgText.offsetWidth;
126                fgText.style.width = width + 'px';
127                container.style.width = width + 'px';
128            };
129
130            updateWidth();
131            window.addEventListener('resize', updateWidth);
132        });
133    </script>
134</body>
135</html>