model output
Gemini 3 Flash Preview

Wavy Loading Animations
A 0.52T 0.36
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>Squeezing Spinner Animation</title>
7    <style>
8        /* Base styles to match the video background */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            background-color: #eeeeee; /* Matches the light gray background */
18            overflow: hidden;
19        }
20
21        /* Container for the spinner */
22        .spinner {
23            position: relative;
24            width: 100px;
25            height: 100px;
26            display: flex;
27            justify-content: center;
28            align-items: center;
29        }
30
31        /* Individual bar styles */
32        .bar {
33            position: absolute;
34            width: 8px;
35            height: 24px;
36            background-color: #a0a0a0; /* Gray color from the video */
37            border-radius: 2px;
38            /* Set the transform origin to the center of the spinner 
39               offset by some distance to create the orbital effect */
40            transform-origin: center 40px; 
41            top: 10px;
42            
43            /* The animation that creates the chasing and squeezing effect */
44            /* Using a non-linear cubic-bezier is key to the "fan" opening and closing */
45            animation: orbit 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
46        }
47
48        /* 
49           Keyframes for the orbital rotation.
50           The "squeezing" effect happens because the bars are 
51           all doing this same non-linear movement but at staggered start times.
52        */
53        @keyframes orbit {
54            0% {
55                transform: rotate(0deg);
56                opacity: 0.3;
57            }
58            50% {
59                opacity: 1;
60            }
61            100% {
62                transform: rotate(360deg);
63                opacity: 0.3;
64            }
65        }
66
67        /* Staggering the bars with delays to create the "wedge" or "tail" shape */
68        .bar:nth-child(1)  { animation-delay: 0.00s; }
69        .bar:nth-child(2)  { animation-delay: 0.04s; }
70        .bar:nth-child(3)  { animation-delay: 0.08s; }
71        .bar:nth-child(4)  { animation-delay: 0.12s; }
72        .bar:nth-child(5)  { animation-delay: 0.16s; }
73        .bar:nth-child(6)  { animation-delay: 0.20s; }
74        .bar:nth-child(7)  { animation-delay: 0.24s; }
75        .bar:nth-child(8)  { animation-delay: 0.28s; }
76        .bar:nth-child(9)  { animation-delay: 0.32s; }
77        .bar:nth-child(10) { animation-delay: 0.36s; }
78
79        /* Match the vertical scaling seen in the video frames */
80        .bar:nth-child(1), .bar:nth-child(10) { height: 10px; }
81        .bar:nth-child(2), .bar:nth-child(9)  { height: 16px; }
82        .bar:nth-child(3), .bar:nth-child(8)  { height: 20px; }
83        .bar:nth-child(4), .bar:nth-child(7)  { height: 24px; }
84        .bar:nth-child(5), .bar:nth-child(6)  { height: 26px; }
85
86    </style>
87</head>
88<body>
89
90    <div class="spinner">
91        <!-- 10 bars create the fluid trail effect -->
92        <div class="bar"></div>
93        <div class="bar"></div>
94        <div class="bar"></div>
95        <div class="bar"></div>
96        <div class="bar"></div>
97        <div class="bar"></div>
98        <div class="bar"></div>
99        <div class="bar"></div>
100        <div class="bar"></div>
101        <div class="bar"></div>
102    </div>
103
104    <script>
105        // No JavaScript is required for this specific animation 
106        // as CSS keyframes provide the necessary timing and easing.
107    </script>
108</body>
109</html>