Gemini 3 Flash Preview

CirclePath 1 v4 Loading Animation
A 0.75T 0.23
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>Staggered Orbit Loader</title>
7    <style>
8        /* 
9           Analysis of Animation:
10           - Background: Pure black (#000).
11           - Dots: Approximately 6-8 dots.
12           - Color: Medium gray (#888) with varying opacity due to lifecycle.
13           - Motion: Dots expand from the center, orbit in a circular path, 
14             and then converge back to the center while fading out.
15           - Timing: The cycle is approximately 3 seconds per "wave".
16           - Easing: Smooth acceleration and deceleration (ease-in-out).
17        */
18
19        body {
20            margin: 0;
21            padding: 0;
22            background-color: #000;
23            display: flex;
24            justify-content: center;
25            align-items: center;
26            height: 100vh;
27            overflow: hidden;
28        }
29
30        .loader {
31            position: relative;
32            width: 100px;
33            height: 100px;
34            display: flex;
35            justify-content: center;
36            align-items: center;
37        }
38
39        .dot {
40            position: absolute;
41            width: 14px;
42            height: 14px;
43            background-color: #999;
44            border-radius: 50%;
45            opacity: 0;
46            /* 
47               The animation combines rotation and translation. 
48               By staggering the start times, the dots form a trail 
49               that expands into a circle and then contracts.
50            */
51            animation: moveOrbit 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
52            /* Suble glow to match the soft edges in the video */
53            box-shadow: 0 0 1px rgba(153, 153, 153, 0.5);
54        }
55
56        @keyframes moveOrbit {
57            0% {
58                transform: rotate(0deg) translateX(0) scale(0.3);
59                opacity: 0;
60            }
61            10% {
62                opacity: 1;
63            }
64            /* Expansion phase: reaches maximum radius and starts spinning faster */
65            50% {
66                transform: rotate(240deg) translateX(38px) scale(1);
67                opacity: 1;
68            }
69            /* Contraction phase: returns to center while continuing rotation */
70            90% {
71                opacity: 1;
72            }
73            100% {
74                transform: rotate(480deg) translateX(0) scale(0.3);
75                opacity: 0;
76            }
77        }
78
79        /* Staggered delays for the 8 dots to create the trail effect */
80        .dot:nth-child(1) { animation-delay: 0.0s; }
81        .dot:nth-child(2) { animation-delay: 0.12s; }
82        .dot:nth-child(3) { animation-delay: 0.24s; }
83        .dot:nth-child(4) { animation-delay: 0.36s; }
84        .dot:nth-child(5) { animation-delay: 0.48s; }
85        .dot:nth-child(6) { animation-delay: 0.6s; }
86        .dot:nth-child(7) { animation-delay: 0.72s; }
87        .dot:nth-child(8) { animation-delay: 0.84s; }
88
89    </style>
90</head>
91<body>
92
93    <div class="loader">
94        <div class="dot"></div>
95        <div class="dot"></div>
96        <div class="dot"></div>
97        <div class="dot"></div>
98        <div class="dot"></div>
99        <div class="dot"></div>
100        <div class="dot"></div>
101        <div class="dot"></div>
102    </div>
103
104</body>
105</html>