Gemini 3 Flash Preview

Tiny Single Element Loading Animations
A 0.85T 0.33
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>Rotating Circle Cross Animation</title>
7    <style>
8        /* 
9           Analysis of timing from video frames:
10           0.0s: Tilted (x shape)
11           0.5s: Upright (+ shape)
12           1.0s: Tilted (x shape)
13           1.5s: Tilted (x shape)
14           2.0s: Upright (+ shape)
15           2.5s: Tilted (x shape)
16           3.0s: Tilted (x shape)
17           3.5s: Upright (+ shape)
18
19           Pattern: The icon is upright every 1.5 seconds (0.5s, 2.0s, 3.5s).
20           Since a cross looks identical every 90 degrees, it rotates 90 degrees every 1.5 seconds.
21           Total duration for 360 degrees = 1.5s * 4 = 6 seconds.
22           To be at 0 degrees (upright) at 0.5s, the starting angle at 0s must be -30 degrees.
23        */
24
25        body {
26            margin: 0;
27            padding: 20px;
28            background-color: #ffffff;
29            display: flex;
30            justify-content: flex-start;
31            align-items: flex-start;
32            font-family: sans-serif;
33        }
34
35        .circle-container {
36            width: 24px;
37            height: 24px;
38            border: 1px solid #d8d8d8; /* Light grey circle border */
39            border-radius: 50%;
40            position: relative;
41            display: flex;
42            justify-content: center;
43            align-items: center;
44            box-sizing: border-box;
45            /* Linear rotation: 360 degrees over 6 seconds */
46            animation: rotate-icon 6s linear infinite;
47        }
48
49        .line {
50            position: absolute;
51            background-color: #a8a8a8; /* Slightly darker grey for the cross */
52            border-radius: 0.5px;
53        }
54
55        /* Vertical part of the cross */
56        .line-v {
57            width: 1px;
58            height: 14px;
59        }
60
61        /* Horizontal part of the cross */
62        .line-h {
63            width: 14px;
64            height: 1px;
65        }
66
67        @keyframes rotate-icon {
68            from {
69                /* Offset by -30 degrees to match the 0.5s mark as upright (+) */
70                transform: rotate(-30deg);
71            }
72            to {
73                transform: rotate(330deg);
74            }
75        }
76    </style>
77</head>
78<body>
79
80    <div class="circle-container">
81        <div class="line line-v"></div>
82        <div class="line line-h"></div>
83    </div>
84
85</body>
86</html>