model output
Gemini 3 Flash Preview

CSS3 loading animations
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>Loading Animation</title>
7    <style>
8        /* 
9           Styling to match the background color and center the content 
10        */
11        body {
12            margin: 0;
13            padding: 0;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            min-height: 100vh;
18            background-color: #111111; /* Dark background matching the video */
19            overflow: hidden;
20        }
21
22        .loading-container {
23            display: flex;
24            gap: 12px; /* Spacing between letters */
25        }
26
27        .loading-container span {
28            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
29            font-weight: 900;
30            font-size: 3.5rem;
31            letter-spacing: 4px;
32            color: #222222; /* Dim base color */
33            text-transform: uppercase;
34            user-select: none;
35            
36            /* Apply the lighting animation */
37            animation: illuminate 1.75s ease-in-out infinite;
38            
39            /* Subtle shadow to give the letters depth like in the video */
40            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
41        }
42
43        /* 
44           Keyframes for the sequential lighting effect.
45           The text goes from a dark gray to a bright, glowing white.
46        */
47        @keyframes illuminate {
48            0%, 100% {
49                color: #222222;
50                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
51            }
52            30% {
53                color: #ffffff;
54                text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 
55                             0 0 20px rgba(255, 255, 255, 0.2);
56            }
57            60% {
58                color: #222222;
59                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
60            }
61        }
62
63        /* 
64           Staggering the start time for each letter to create the 
65           "wave" effect seen in the video.
66        */
67        .loading-container span:nth-child(1) { animation-delay: 0.00s; }
68        .loading-container span:nth-child(2) { animation-delay: 0.15s; }
69        .loading-container span:nth-child(3) { animation-delay: 0.30s; }
70        .loading-container span:nth-child(4) { animation-delay: 0.45s; }
71        .loading-container span:nth-child(5) { animation-delay: 0.60s; }
72        .loading-container span:nth-child(6) { animation-delay: 0.75s; }
73        .loading-container span:nth-child(7) { animation-delay: 0.90s; }
74
75    </style>
76</head>
77<body>
78
79    <div class="loading-container">
80        <span>L</span>
81        <span>O</span>
82        <span>A</span>
83        <span>D</span>
84        <span>I</span>
85        <span>N</span>
86        <span>G</span>
87    </div>
88
89</body>
90</html>