model output
Gemini 3 Flash Preview

Neon Loaders
A 0.88T 0.33
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>Neon Loading Animation</title>
7    <style>
8        /* Reset and Base Styles */
9        * {
10            margin: 0;
11            padding: 0;
12            box-sizing: border-box;
13        }
14
15        body {
16            background: radial-gradient(circle, #1c1c1c 0%, #080808 100%);
17            height: 100vh;
18            display: flex;
19            justify-content: center;
20            align-items: center;
21            overflow: hidden;
22            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23        }
24
25        /* The Loading Container */
26        .loader-container {
27            position: relative;
28            padding: 10px 45px;
29            border: 2px solid #ff00ff;
30            border-radius: 4px;
31            display: flex;
32            justify-content: center;
33            align-items: center;
34            
35            /* Apply color-changing animation */
36            animation: neon-cycle 4s linear infinite;
37            
38            /* Add a subtle glow inside the box */
39            background: rgba(0, 0, 0, 0.2);
40        }
41
42        /* Loading Text */
43        .loader-text {
44            font-size: 20px;
45            font-weight: 500;
46            letter-spacing: 3px;
47            text-transform: uppercase;
48            user-select: none;
49            /* Sync text color with border color */
50            animation: text-glow-cycle 4s linear infinite;
51        }
52
53        /* Keyframes for the Neon Cycle */
54        /* Replicating the Magenta -> Purple -> Blue -> Cyan transition */
55        @keyframes neon-cycle {
56            0%, 100% {
57                border-color: #ff00de;
58                box-shadow: 0 0 15px #ff00de, 
59                            inset 0 0 5px rgba(255, 0, 222, 0.5);
60            }
61            25% {
62                border-color: #8e00ff;
63                box-shadow: 0 0 15px #8e00ff, 
64                            inset 0 0 5px rgba(142, 0, 255, 0.5);
65            }
66            50% {
67                border-color: #0048ff;
68                box-shadow: 0 0 15px #0048ff, 
69                            inset 0 0 5px rgba(0, 72, 255, 0.5);
70            }
71            75% {
72                border-color: #00d4ff;
73                box-shadow: 0 0 15px #00d4ff, 
74                            inset 0 0 5px rgba(0, 212, 255, 0.5);
75            }
76        }
77
78        @keyframes text-glow-cycle {
79            0%, 100% {
80                color: #ff00de;
81                text-shadow: 0 0 8px #ff00de;
82            }
83            25% {
84                color: #8e00ff;
85                text-shadow: 0 0 8px #8e00ff;
86            }
87            50% {
88                color: #0048ff;
89                text-shadow: 0 0 8px #0048ff;
90            }
91            75% {
92                color: #00d4ff;
93                text-shadow: 0 0 8px #00d4ff;
94            }
95        }
96
97        /* Vignette effect for background matching the video */
98        body::after {
99            content: '';
100            position: absolute;
101            top: 0;
102            left: 0;
103            width: 100%;
104            height: 100%;
105            background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.8) 100%);
106            pointer-events: none;
107        }
108    </style>
109</head>
110<body>
111
112    <div class="loader-container">
113        <div class="loader-text">Loading</div>
114    </div>
115
116</body>
117</html>