model output
Gemini 3 Flash Preview

Simple loading indicators
A 0.90T 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 Animation Recreated</title>
7    <style>
8        /* 
9           Background of the page is white as seen in the video.
10           The animation consists of a small square in the top-left corner.
11        */
12        body {
13            margin: 0;
14            padding: 20px;
15            background-color: #ffffff;
16            display: flex;
17            justify-content: flex-start;
18            align-items: flex-start;
19        }
20
21        /* 
22           The base square is a light grey.
23           Teal: #169b81
24           Grey: #cfd8dc
25        */
26        .animated-square {
27            width: 48px;
28            height: 48px;
29            background-color: #cfd8dc;
30            position: relative;
31            overflow: hidden;
32        }
33
34        /* 
35           The teal overlay that grows and shrinks from the top.
36        */
37        .animated-square::before {
38            content: '';
39            position: absolute;
40            top: 0;
41            left: 0;
42            width: 100%;
43            background-color: #169b81;
44            /* 
45               The animation follows a 3-second cycle based on the provided frames:
46               0s: Small strip (20%)
47               1s: Full (100%)
48               2s: Small strip (20%)
49               2.5s: Empty (0%)
50               3s: Small strip (20%) - Cycle repeats
51            */
52            animation: fillEffect 3s linear infinite;
53        }
54
55        @keyframes fillEffect {
56            0% {
57                height: 20%;
58            }
59            33.33% { /* 1 second mark */
60                height: 100%;
61            }
62            66.66% { /* 2 second mark */
63                height: 20%;
64            }
65            83.33% { /* 2.5 second mark */
66                height: 0%;
67            }
68            100% { /* 3 second mark */
69                height: 20%;
70            }
71        }
72    </style>
73</head>
74<body>
75
76    <div class="animated-square"></div>
77
78</body>
79</html>