model output
Gemini 3 Flash Preview

Spinners using Font Icons
A 0.87T 0.37
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>iOS Style Spinner</title>
7    <style>
8        /* Base page styling to match the video background */
9        body {
10            margin: 0;
11            padding: 0;
12            background-color: #111111;
13            display: flex;
14            justify-content: center;
15            align-items: flex-start; /* Aligned to top as seen in screenshots */
16            height: 100vh;
17            overflow: hidden;
18        }
19
20        /* Container to adjust the vertical position of the spinner */
21        .loader-wrapper {
22            margin-top: 30px;
23        }
24
25        /* The spinner container handles the discrete rotation */
26        .spinner {
27            position: relative;
28            width: 32px;
29            height: 32px;
30            /* steps(12) creates the 'ticking' motion by splitting the rotation into 12 chunks */
31            animation: spin-step 1s steps(12) infinite;
32        }
33
34        /* Styling for the individual petals/spokes */
35        .spinner div {
36            position: absolute;
37            width: 2.6px;
38            height: 8.5px;
39            background: #ffffff;
40            border-radius: 1.3px;
41            left: 14.7px; /* Centers the 2.6px spoke in the 32px container */
42            top: 0;
43            /* Rotate around the exact center of the 32x32 container */
44            transform-origin: 1.3px 16px;
45        }
46
47        /* 
48           Discrete placement and opacity for each spoke.
49           The opacity creates a "trail" effect. 
50           With the container rotating clockwise, Child 1 is the 'head' 
51           and Child 12 is the 'tail'.
52        */
53        .spinner div:nth-child(1)  { transform: rotate(0deg);   opacity: 1; }
54        .spinner div:nth-child(2)  { transform: rotate(30deg);  opacity: 0.08; }
55        .spinner div:nth-child(3)  { transform: rotate(60deg);  opacity: 0.16; }
56        .spinner div:nth-child(4)  { transform: rotate(90deg);  opacity: 0.25; }
57        .spinner div:nth-child(5)  { transform: rotate(120deg); opacity: 0.33; }
58        .spinner div:nth-child(6)  { transform: rotate(150deg); opacity: 0.41; }
59        .spinner div:nth-child(7)  { transform: rotate(180deg); opacity: 0.5; }
60        .spinner div:nth-child(8)  { transform: rotate(210deg); opacity: 0.58; }
61        .spinner div:nth-child(9)  { transform: rotate(240deg); opacity: 0.66; }
62        .spinner div:nth-child(10) { transform: rotate(270deg); opacity: 0.75; }
63        .spinner div:nth-child(11) { transform: rotate(300deg); opacity: 0.83; }
64        .spinner div:nth-child(12) { transform: rotate(330deg); opacity: 0.91; }
65
66        @keyframes spin-step {
67            from { transform: rotate(0deg); }
68            to { transform: rotate(360deg); }
69        }
70    </style>
71</head>
72<body>
73
74    <div class="loader-wrapper">
75        <div class="spinner">
76            <!-- 12 petals for the activity indicator -->
77            <div></div><div></div><div></div><div></div>
78            <div></div><div></div><div></div><div></div>
79            <div></div><div></div><div></div><div></div>
80        </div>
81    </div>
82
83</body>
84</html>