model output
Gemini 3 Flash Preview

Neon Loaders
A 0.89T 0.49
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 Bar Animation</title>
7  <style>
8    /* Reset and Center */
9    * {
10      box-sizing: border-box;
11    }
12    
13    body, html {
14      margin: 0;
15      padding: 0;
16      width: 100%;
17      height: 100%;
18      display: flex;
19      justify-content: center;
20      align-items: center;
21      /* Radial gradient matching the dark vignette background of the video */
22      background: radial-gradient(circle, #2a2a2e 0%, #0d0d0f 100%);
23      overflow: hidden;
24    }
25
26    /* Outer Track Container */
27    .track {
28      width: 160px;
29      height: 16px;
30      background-color: #626262;
31      position: relative;
32      display: flex;
33      align-items: center;
34    }
35
36    /* Filling Progress Bar */
37    .progress {
38      height: 100%;
39      width: 0%;
40      /* Animation duration is 5 seconds to match the loop in the video */
41      animation: progress-fill 5s linear infinite;
42    }
43
44    /**
45     * Animation breakdown:
46     * 0-80%: Bar fills from 0 to 100% (approx 4 seconds)
47     * 80-90%: Bar stays full
48     * 90-100%: Bar resets/fades for the loop
49     */
50    @keyframes progress-fill {
51      0% {
52        width: 0%;
53        background-color: #ff00bf;
54        box-shadow: 0 0 10px #ff00bf, 0 0 20px #ff00bf88;
55      }
56      20% {
57        width: 25%;
58        background-color: #d400ff;
59        box-shadow: 0 0 12px #d400ff, 0 0 24px #d400ff88;
60      }
61      50% {
62        width: 62.5%;
63        background-color: #6e22ff;
64        box-shadow: 0 0 15px #6e22ff, 0 0 30px #6e22ff88;
65      }
66      80% {
67        width: 100%;
68        background-color: #00a2ff;
69        box-shadow: 0 0 15px #00a2ff, 0 0 30px #00a2ff88;
70        opacity: 1;
71      }
72      90% {
73        width: 100%;
74        background-color: #00a2ff;
75        box-shadow: 0 0 15px #00a2ff, 0 0 30px #00a2ff88;
76        opacity: 1;
77      }
78      95% {
79        width: 100%;
80        opacity: 0;
81      }
82      100% {
83        width: 0%;
84        opacity: 0;
85      }
86    }
87  </style>
88</head>
89<body>
90
91  <!-- The Loading Bar Component -->
92  <div class="track">
93    <div class="progress"></div>
94  </div>
95
96  <script>
97    // No JavaScript is required for this specific animation 
98    // as CSS keyframes handle the timing and transitions perfectly.
99  </script>
100</body>
101</html>