model output
Gemini 3 Flash Preview

flat loading animate
A 0.83T 0.35
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 Target Animation</title>
7    <style>
8        /* Center the animation in the middle of the viewport */
9        body {
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            background-color: #ffffff;
17            overflow: hidden;
18        }
19
20        /* 
21           The loader uses background-clip: content-box to create the inner dot.
22           The 'padding' property acts as the white gap between the ring and the center.
23           The 'border' property creates the outer ring.
24        */
25        .loader {
26            width: 82px;
27            height: 82px;
28            border: 11px solid #FF5A5A; /* Vibrant red-coral color */
29            border-radius: 50%;
30            background-color: #FF5A5A;
31            background-clip: content-box;
32            padding: 15px;
33            box-sizing: border-box;
34            
35            /* 
36               The animation lasts 0.5s to transition from 'Target' to 'Solid'.
37               'alternate' makes it go back to 'Target' in the next 0.5s, 
38               completing a 1-second full cycle.
39            */
40            animation: pulse-gap 0.5s ease-in-out infinite alternate;
41        }
42
43        @keyframes pulse-gap {
44            0% {
45                /* Target state: Significant gap visible */
46                padding: 15px;
47            }
48            100% {
49                /* Solid state: Gap closed, inner dot fills the space */
50                padding: 0px;
51            }
52        }
53    </style>
54</head>
55<body>
56
57    <!-- Single element representing the target icon -->
58    <div class="loader"></div>
59
60    <script>
61        /**
62         * The animation is handled entirely via CSS for performance and accuracy.
63         * JS is not required for this specific loop, but ensures the document is ready.
64         */
65        window.addEventListener('DOMContentLoaded', () => {
66            console.log("Animation initialized.");
67        });
68    </script>
69</body>
70</html>