model output
Gemini 3 Flash Preview

Neon Loaders
A 0.80T 0.22
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>Staggered Gradient Loader</title>
7    <style>
8        :root {
9            --bg-color: #121214;
10            --bar-bg: rgba(255, 255, 255, 0.15);
11            --gradient-start: #ff00cc;
12            --gradient-end: #3366ff;
13            --anim-duration: 4s;
14            --line-count: 10;
15        }
16
17        * {
18            box-sizing: border-box;
19            margin: 0;
20            padding: 0;
21        }
22
23        body {
24            background: radial-gradient(circle, #1a1a1c 0%, #000 100%);
25            height: 100vh;
26            display: flex;
27            justify-content: center;
28            align-items: center;
29            overflow: hidden;
30        }
31
32        /* The container representing the gray box in the video */
33        .loader-container {
34            position: relative;
35            width: 280px;
36            height: 50px;
37            background-color: var(--bar-bg);
38            padding: 4px;
39            display: flex;
40            flex-direction: column;
41            justify-content: space-between;
42            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
43        }
44
45        /* Individual horizontal lines */
46        .line {
47            height: 8%; /* Adjust based on count */
48            width: 0%;
49            background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
50            border-radius: 1px;
51            animation: progress-wave var(--anim-duration) ease-in-out infinite;
52            filter: drop-shadow(0 0 5px rgba(255, 0, 204, 0.3));
53        }
54
55        /* 
56           Keyframes to simulate the building up and receding wave effect 
57           seen in the video. The staggered delays create the diagonal and 
58           curved leading edge.
59        */
60        @keyframes progress-wave {
61            0% {
62                width: 0%;
63                opacity: 0.5;
64            }
65            40% {
66                width: 85%;
67                opacity: 1;
68            }
69            50% {
70                width: 90%;
71            }
72            60% {
73                width: 85%;
74            }
75            100% {
76                width: 0%;
77                opacity: 0.5;
78            }
79        }
80
81        /* Generate staggered delays for each line to create the wave shape */
82        .line:nth-child(1)  { animation-delay: 0.0s; }
83        .line:nth-child(2)  { animation-delay: 0.1s; }
84        .line:nth-child(3)  { animation-delay: 0.2s; }
85        .line:nth-child(4)  { animation-delay: 0.3s; }
86        .line:nth-child(5)  { animation-delay: 0.4s; }
87        .line:nth-child(6)  { animation-delay: 0.5s; }
88        .line:nth-child(7)  { animation-delay: 0.6s; }
89        .line:nth-child(8)  { animation-delay: 0.7s; }
90        .line:nth-child(9)  { animation-delay: 0.8s; }
91        .line:nth-child(10) { animation-delay: 0.9s; }
92
93    </style>
94</head>
95<body>
96
97    <div class="loader-container">
98        <!-- 10 lines to match the segmented look of the video -->
99        <div class="line"></div>
100        <div class="line"></div>
101        <div class="line"></div>
102        <div class="line"></div>
103        <div class="line"></div>
104        <div class="line"></div>
105        <div class="line"></div>
106        <div class="line"></div>
107        <div class="line"></div>
108        <div class="line"></div>
109    </div>
110
111    <script>
112        // Optional: Dynamically set the gradient based on line position 
113        // to make the vertical transition smoother, matching the video's aesthetics
114        const lines = document.querySelectorAll('.line');
115        lines.forEach((line, index) => {
116            // Slight color shift per line could be added here if needed, 
117            // but the CSS linear-gradient already captures the primary feel.
118        });
119    </script>
120</body>
121</html>