model output
Claude Sonnet 4.6

Spinners using Font Icons
A 0.78T 0.33
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 Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #1a1a1a;
12    display: flex;
13    justify-content: center;
14    align-items: flex-start;
15    height: 100vh;
16    overflow: hidden;
17  }
18
19  .loader-container {
20    position: absolute;
21    top: 40px;
22    left: 50%;
23    transform: translateX(-50%);
24    width: 50px;
25    height: 50px;
26  }
27
28  .loader {
29    position: relative;
30    width: 50px;
31    height: 50px;
32  }
33
34  /* Outer ring - static white circle */
35  .outer-ring {
36    position: absolute;
37    top: 0;
38    left: 0;
39    width: 50px;
40    height: 50px;
41    border-radius: 50%;
42    border: 2.5px solid white;
43  }
44
45  /* Inner spinning arc */
46  .inner-arc {
47    position: absolute;
48    top: 7px;
49    left: 7px;
50    width: 36px;
51    height: 36px;
52    border-radius: 50%;
53    border: 2.5px solid transparent;
54    border-top-color: white;
55    border-right-color: white;
56    border-bottom-color: white;
57    animation: spin 1.2s linear infinite;
58  }
59
60  @keyframes spin {
61    0% {
62      transform: rotate(0deg);
63      border-top-color: white;
64      border-right-color: white;
65      border-bottom-color: white;
66      border-left-color: transparent;
67    }
68    25% {
69      border-top-color: white;
70      border-right-color: white;
71      border-bottom-color: transparent;
72      border-left-color: transparent;
73    }
74    50% {
75      border-top-color: white;
76      border-right-color: transparent;
77      border-bottom-color: transparent;
78      border-left-color: transparent;
79    }
80    75% {
81      border-top-color: white;
82      border-right-color: white;
83      border-bottom-color: transparent;
84      border-left-color: transparent;
85    }
86    100% {
87      transform: rotate(360deg);
88      border-top-color: white;
89      border-right-color: white;
90      border-bottom-color: white;
91      border-left-color: transparent;
92    }
93  }
94</style>
95</head>
96<body>
97  <div class="loader-container">
98    <div class="loader">
99      <div class="outer-ring"></div>
100      <div class="inner-arc"></div>
101    </div>
102  </div>
103
104  <script>
105    // The animation uses CSS only - the inner arc rotates continuously
106    // creating the appearance of a spinning loader inside a static outer ring
107  </script>
108</body>
109</html>