Gemini 3 Flash Preview

Tiny Single Element Loading Animations
A 0.62T 0.26
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>Clock Animation</title>
7    <style>
8        /* Base styling to match the video background */
9        body {
10            margin: 0;
11            padding: 20px;
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        /* The clock face container */
21        .clock {
22            width: 28px;
23            height: 28px;
24            border: 1.5px solid #666;
25            border-radius: 50%;
26            position: relative;
27            box-sizing: border-box;
28        }
29
30        /* The center point of the clock */
31        .clock::after {
32            content: '';
33            position: absolute;
34            top: 50%;
35            left: 50%;
36            width: 2px;
37            height: 2px;
38            background-color: #666;
39            border-radius: 50%;
40            transform: translate(-50%, -50%);
41            z-index: 5;
42        }
43
44        /* Shared hand styling */
45        .hand {
46            position: absolute;
47            background-color: #666;
48            border-radius: 1px;
49            bottom: 50%;
50            left: calc(50% - 0.75px);
51            width: 1.5px;
52            transform-origin: bottom center;
53        }
54
55        /* Hour hand - shorter and slower */
56        .hour {
57            height: 8px;
58            /* Period of 6s provides a steady rotation consistent with the icon's visual speed */
59            animation: clock-rotate 6s linear infinite;
60        }
61
62        /* Minute hand - longer and faster */
63        .minute {
64            height: 11px;
65            /* Period of 1.5s matches the observed 'straight line' vertical position every 1.5s in the video */
66            animation: clock-rotate 1.5s linear infinite;
67        }
68
69        /* Rotation animation */
70        @keyframes clock-rotate {
71            from {
72                transform: rotate(0deg);
73            }
74            to {
75                transform: rotate(360deg);
76            }
77        }
78
79        /* Offsetting the start to match the initial frame (approx 10:10) */
80        .hour {
81            animation-delay: -5s; /* Starts at ~300deg (10 o'clock) */
82        }
83        .minute {
84            animation-delay: -0.25s; /* Starts at ~60deg (2 o'clock) */
85        }
86    </style>
87</head>
88<body>
89
90    <!-- Simple div structure for the clock and its hands -->
91    <div class="clock">
92        <div class="hand hour"></div>
93        <div class="hand minute"></div>
94    </div>
95
96</body>
97</html>