model output
Gemini 3 Flash Preview

flat loading animate
A 0.80T 0.15
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>Pulsing Dot Animation</title>
7    <style>
8        /* Reset and center container */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            background-color: #ffffff;
18            overflow: hidden;
19        }
20
21        /* The central red dot */
22        .dot {
23            position: relative;
24            width: 24px;
25            height: 24px;
26            background-color: #ff5f5f; /* Coral/Red color from the video */
27            border-radius: 50%;
28            z-index: 2;
29            /* Subtle breathing animation */
30            animation: breathe 2s infinite ease-in-out;
31        }
32
33        /* Expanding ring effect (often found in this style of animation) */
34        .dot::after {
35            content: '';
36            position: absolute;
37            top: 0;
38            left: 0;
39            width: 100%;
40            height: 100%;
41            background-color: #ff5f5f;
42            border-radius: 50%;
43            z-index: 1;
44            animation: ping 2s infinite ease-out;
45        }
46
47        /* Breathing scale animation for the main dot */
48        @keyframes breathe {
49            0%, 100% {
50                transform: scale(1);
51            }
52            50% {
53                transform: scale(1.1);
54            }
55        }
56
57        /* Expanding ripple effect */
58        @keyframes ping {
59            0% {
60                transform: scale(1);
61                opacity: 0.6;
62            }
63            70%, 100% {
64                transform: scale(2.5);
65                opacity: 0;
66            }
67        }
68    </style>
69</head>
70<body>
71
72    <!-- Single animated element to match the video frames -->
73    <div class="dot"></div>
74
75    <script>
76        // No complex JavaScript is required as the animation 
77        // is purely visual and loops infinitely via CSS.
78        // This ensures the smoothest performance.
79    </script>
80</body>
81</html>