model output
Gemini 3 Flash Preview

Spinners using Font Icons
A 0.86T 0.50
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>Rotating Refresh Icon</title>
7    <style>
8        /* Base styles to match the video environment */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            background-color: #1a1a1a; /* Dark background from the video */
15            display: flex;
16            justify-content: center;
17            align-items: center;
18            overflow: hidden;
19        }
20
21        /* Container for positioning the icon similar to the video */
22        .container {
23            position: relative;
24            /* In the video, the icon is slightly in the upper half */
25            transform: translateY(-150px);
26        }
27
28        /* The SVG Refresh Icon */
29        .refresh-icon {
30            width: 80px;
31            height: 80px;
32            fill: none;
33            stroke: #ffffff;
34            stroke-width: 8;
35            stroke-linecap: round;
36            stroke-linejoin: round;
37            /* Apply continuous rotation */
38            animation: spin 2s linear infinite;
39        }
40
41        /* Rotation Keyframes */
42        @keyframes spin {
43            from {
44                transform: rotate(0deg);
45            }
46            to {
47                transform: rotate(360deg);
48            }
49        }
50
51        /* Glow effect matching the video compressed artifacting/bloom */
52        .glow-effect {
53            filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
54        }
55    </style>
56</head>
57<body>
58
59    <div class="container">
60        <!-- SVG recreation of the circular arrow seen in the video -->
61        <svg class="refresh-icon glow-effect" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
62            <!-- Partial circle path -->
63            <path d="M 80 50 A 30 30 0 1 1 71.21 28.79" />
64            <!-- Arrow head -->
65            <polyline points="60,30 71.21,28.79 73,15" />
66        </svg>
67    </div>
68
69    <script>
70        // No complex JavaScript logic is required for this specific animation 
71        // as it's a CSS-driven infinite loop, but we can ensure it starts 
72        // cleanly if needed or handle tab visibility changes.
73        document.addEventListener('visibilitychange', () => {
74            const icon = document.querySelector('.refresh-icon');
75            if (document.hidden) {
76                icon.style.animationPlayState = 'paused';
77            } else {
78                icon.style.animationPlayState = 'running';
79            }
80        });
81    </script>
82</body>
83</html>