model output
Gemini 3 Flash Preview

Loaders (WIP)
A 0.94T 0.27
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 color and layout to match the video */
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: #e74c3c; /* Flat UI Alizarin Red */
17            overflow: hidden;
18        }
19
20        /* The container for the loading bar */
21        .loader-container {
22            width: 180px;
23            height: 34px;
24            background-color: rgba(255, 255, 255, 0.2);
25            position: relative;
26            overflow: hidden;
27            display: flex;
28            align-items: center;
29            justify-content: center;
30            /* Position slightly above the vertical center to match video framing */
31            transform: translateY(-160px);
32        }
33
34        /* The white text "LOADING ..." */
35        .text {
36            color: #ffffff;
37            font-family: Arial, sans-serif;
38            font-size: 13px;
39            font-weight: 500;
40            letter-spacing: 2px;
41            z-index: 1; /* Place text below the progress bar to allow "masking" */
42            user-select: none;
43        }
44
45        /* The white progress bar that moves left to right */
46        .progress-bar {
47            position: absolute;
48            top: 0;
49            left: 0;
50            height: 100%;
51            width: 0;
52            background-color: #ffffff;
53            z-index: 2; /* Progress bar is on top of text */
54            
55            /* 
56               The animation follows a ~7.5s cycle. 
57               The bar fills from 0 to 6s, then stays full until 7.5s before resetting.
58            */
59            animation: fillProgress 7.5s linear infinite;
60        }
61
62        @keyframes fillProgress {
63            0% {
64                width: 0%;
65            }
66            /* Fill for 80% of the duration (6 seconds) */
67            80% {
68                width: 100%;
69            }
70            /* Hold at 100% for the remaining 20% of the duration (1.5 seconds) */
71            100% {
72                width: 100%;
73            }
74        }
75    </style>
76</head>
77<body>
78
79    <div class="loader-container">
80        <!-- The progress bar moves over the text, hiding the white text against its own white background -->
81        <div class="progress-bar"></div>
82        <div class="text">LOADING ...</div>
83    </div>
84
85</body>
86</html>