model output
Gemini 3 Flash Preview

SVG Loading icons
A 0.87T 0.19
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      Colors and Background:
10      The background is a dark charcoal grey (#2c3338).
11      The animated bars are a vibrant orange (#ff7f32).
12    */
13    body {
14      background-color: #2c3338;
15      display: flex;
16      justify-content: center;
17      align-items: center;
18      height: 100vh;
19      margin: 0;
20      overflow: hidden;
21    }
22
23    /* 
24      Container for the three bars.
25      Positioned similarly to the video reference.
26    */
27    .loader {
28      display: flex;
29      gap: 5px; /* Spacing between the bars */
30      /* Moving the container slightly up to match the video's vertical alignment */
31      transform: translateY(-200px); 
32    }
33
34    /* 
35      The bars are small vertical rectangles.
36    */
37    .bar {
38      width: 3px;
39      height: 9px;
40      background-color: #ff7f32;
41      border-radius: 1px;
42      /* 
43        The animation duration is approximately 1.2s for a full cycle.
44        We use ease-in-out for smooth transitions at the peaks.
45      */
46      animation: wave 1.2s infinite ease-in-out;
47    }
48
49    /* 
50      Staggered timing:
51      Each bar follows the previous one with a specific delay 
52      to create the "wave" or "snake" effect seen in the video.
53    */
54    .bar:nth-child(1) {
55      animation-delay: 0s;
56    }
57
58    .bar:nth-child(2) {
59      animation-delay: 0.2s;
60    }
61
62    .bar:nth-child(3) {
63      animation-delay: 0.4s;
64    }
65
66    /* 
67      The Keyframes:
68      The bars move vertically (translateY). 
69      They move up from their resting position and back down.
70    */
71    @keyframes wave {
72      0%, 100% {
73        transform: translateY(0);
74      }
75      30% {
76        transform: translateY(-8px);
77      }
78      60% {
79        transform: translateY(0);
80      }
81    }
82  </style>
83</head>
84<body>
85
86  <div class="loader">
87    <div class="bar"></div>
88    <div class="bar"></div>
89    <div class="bar"></div>
90  </div>
91
92</body>
93</html>