model output
Gemini 3 Flash Preview

Simple loading indicators
A 0.85T 0.25
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>Square Rotation Animation</title>
7    <style>
8        /* Reset and layout */
9        body {
10            margin: 0;
11            padding: 0;
12            background-color: #ffffff;
13            display: flex;
14            justify-content: flex-start;
15            align-items: flex-start;
16            height: 100vh;
17            overflow: hidden;
18        }
19
20        /* Container for precise positioning */
21        .stage {
22            position: relative;
23            padding: 30px;
24        }
25
26        /* The animated square */
27        .box {
28            width: 46px;
29            height: 46px;
30            background-color: #d1d5db; /* Light grey base */
31            position: relative;
32            overflow: hidden;
33            /* Rotation animation */
34            animation: rotate-box 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
35        }
36
37        /* The teal fill effect */
38        .box::after {
39            content: "";
40            position: absolute;
41            top: 0;
42            left: 0;
43            width: 100%;
44            background-color: #0d9488; /* Teal color */
45            /* Filling animation */
46            animation: fill-box 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
47        }
48
49        /* 
50           Animation Keyframes based on video timestamps:
51           0s: Tilted ~ -20deg, ~20% teal top.
52           0.5s - 1.5s: Diamond (45deg), 100% teal.
53           2.0s: Back to tilted, ~20% teal top.
54           2.5s: Tilted, mostly grey (0% teal).
55        */
56
57        @keyframes rotate-box {
58            0%, 66.6%, 100% {
59                transform: rotate(-18deg);
60            }
61            16.6%, 50% {
62                /* 16.6% of 3s is 0.5s; 50% is 1.5s */
63                transform: rotate(45deg);
64            }
65        }
66
67        @keyframes fill-box {
68            0%, 66.6%, 100% {
69                height: 22%;
70            }
71            16.6%, 50% {
72                height: 100%;
73            }
74            83.3% {
75                /* 83.3% of 3s is 2.5s */
76                height: 0%;
77            }
78        }
79    </style>
80</head>
81<body>
82
83    <div class="stage">
84        <div class="box"></div>
85    </div>
86
87</body>
88</html>