model output
Gemini 3 Flash Preview

Such Spinners, Much Loading
A 0.89T 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>Squircle Loader Animation</title>
7    <style>
8        /* Reset and layout */
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: #ffffff;
18            overflow: hidden;
19        }
20
21        /* The container for the loader */
22        .loader-container {
23            position: relative;
24            width: 100px;
25            height: 100px;
26            display: flex;
27            justify-content: center;
28            align-items: center;
29        }
30
31        /**
32         * The Squircle Shape
33         * Based on the video frames:
34         * - Color: Dark grey (#3c3c3c)
35         * - Shape: A rounded square (squircle)
36         * - Animation: A 360-degree rotation that appears to snap/ease every 90 degrees.
37         */
38        .squircle {
39            width: 40px;
40            height: 40px;
41            background-color: #3c3c3c;
42            border-radius: 35%; /* Creates the "squircle" look seen in the video */
43            
44            /* 
45               The animation lasts 2 seconds for a full rotation.
46               Given the frames at 0s, 0.5s, 1s, 1.5s, the shape rotates 
47               consistently. Using a step-like ease or a smooth ease-in-out 
48               matches the visual momentum.
49            */
50            animation: rotate-squircle 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
51        }
52
53        @keyframes rotate-squircle {
54            0% {
55                transform: rotate(45deg);
56            }
57            25% {
58                transform: rotate(135deg);
59            }
60            50% {
61                transform: rotate(225deg);
62            }
63            75% {
64                transform: rotate(315deg);
65            }
66            100% {
67                transform: rotate(405deg);
68            }
69        }
70
71        /* Optional: Adding a slight scale pulse as seen in many similar loaders */
72        /* To match the video strictly, we keep it simple rotation. */
73    </style>
74</head>
75<body>
76
77    <div class="loader-container">
78        <div class="squircle"></div>
79    </div>
80
81    <script>
82        /**
83         * The animation is handled entirely via CSS for performance 
84         * and to match the precise timing observed in the video frames.
85         * The 45-degree offset at start matches the "diamond" orientation 
86         * seen at the 00:00.000 mark.
87         */
88    </script>
89</body>
90</html>