Gemini 3 Flash Preview

Tiny Single Element Loading Animations
A 0.76T 0.28
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>Refresh Spinner Animation</title>
7    <style>
8        /* 
9           Reset and basic layout 
10           The video shows a white background with a small icon in the top-left corner.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            background-color: #ffffff;
16            height: 100vh;
17            display: flex;
18            justify-content: flex-start;
19            align-items: flex-start;
20        }
21
22        /* 
23           Container for the spinner. 
24           Positioned slightly away from the edge as seen in the frames.
25        */
26        .container {
27            padding: 24px;
28        }
29
30        /* 
31           The spinner element.
32           Dimensions are small, matching the visual scale (approx 16-20px).
33        */
34        .spinner {
35            width: 18px;
36            height: 18px;
37            color: #5f6368; /* Standard neutral grey icon color */
38            animation: rotate-spinner 1s linear infinite;
39            display: flex;
40            justify-content: center;
41            align-items: center;
42        }
43
44        /* 
45           SVG path styling 
46           Matches the thin-stroked circular arrow seen in the video.
47        */
48        svg {
49            width: 100%;
50            height: 100%;
51            fill: none;
52            stroke: currentColor;
53            stroke-width: 1.5;
54            stroke-linecap: round;
55            stroke-linejoin: round;
56        }
57
58        /* 
59           Animation: Continuous 360-degree rotation.
60           The video shows a smooth, linear progression.
61           1.0s per rotation matches the timestamp observation (0.5s = 180deg).
62        */
63        @keyframes rotate-spinner {
64            from {
65                transform: rotate(0deg);
66            }
67            to {
68                transform: rotate(360deg);
69            }
70        }
71    </style>
72</head>
73<body>
74
75    <div class="container">
76        <div class="spinner">
77            <!-- Simplified Refresh/Reload Icon SVG -->
78            <svg viewBox="0 0 24 24">
79                <!-- Arrowhead -->
80                <polyline points="23 4 23 10 17 10"></polyline>
81                <!-- Circular path -->
82                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
83            </svg>
84        </div>
85    </div>
86
87</body>
88</html>