model output
Gemini 3 Flash Preview

SVG Loading icons
A 0.80T 0.25
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>Loading Spinner Animation</title>
7    <style>
8        /* 
9           Analysis of the provided animation:
10           - Background: Dark charcoal gray (#2c3338)
11           - Spinner color: Vibrant orange-red (#ff6d2d)
12           - Shape: Circular arc with rounded caps
13           - Animation: A smooth rotation combined with a subtle expansion/contraction of the arc length
14        */
15
16        body, html {
17            margin: 0;
18            padding: 0;
19            width: 100%;
20            height: 100%;
21            display: flex;
22            justify-content: center;
23            align-items: center;
24            background-color: #2c3338; /* Matches the dark background in frames */
25            overflow: hidden;
26        }
27
28        .loader-container {
29            position: relative;
30            width: 60px;
31            height: 60px;
32        }
33
34        .loader-svg {
35            animation: rotate 2s linear infinite;
36            width: 100%;
37            height: 100%;
38        }
39
40        .loader-circle {
41            fill: none;
42            stroke: #ff6d2d; /* Orange color from the frames */
43            stroke-width: 5;
44            stroke-linecap: round;
45            /* 
46               Circumference of a circle with r=20 is ~125.6 
47               We animate stroke-dasharray and stroke-dashoffset to create the 
48               growing and shrinking "snake" effect seen in modern loaders.
49            */
50            animation: dash 1.5s ease-in-out infinite;
51        }
52
53        @keyframes rotate {
54            100% {
55                transform: rotate(360deg);
56            }
57        }
58
59        @keyframes dash {
60            0% {
61                stroke-dasharray: 1, 150;
62                stroke-dashoffset: 0;
63            }
64            50% {
65                stroke-dasharray: 90, 150;
66                stroke-dashoffset: -35;
67            }
68            100% {
69                stroke-dasharray: 90, 150;
70                stroke-dashoffset: -124;
71            }
72        }
73
74        /* 
75           Additional refinement: 
76           The frames show a relatively short arc. 
77           If a constant rotation is preferred over the "snake" effect:
78        */
79        /* 
80        .loader-circle-simple {
81            stroke-dasharray: 30, 150; 
82            animation: rotate 1s linear infinite;
83        }
84        */
85    </style>
86</head>
87<body>
88
89    <div class="loader-container">
90        <!-- 
91            Using SVG allows for precise control over the arc length 
92            and rounded ends (stroke-linecap: round) as seen in the video.
93        -->
94        <svg class="loader-svg" viewBox="0 0 50 50">
95            <circle class="loader-circle" cx="25" cy="25" r="20"></circle>
96        </svg>
97    </div>
98
99</body>
100</html>