model output
Claude Sonnet 4.6

Spinners using Font Icons
A 0.83T 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  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #1a1a1a;
16    display: flex;
17    justify-content: center;
18    align-items: flex-start;
19    height: 100vh;
20    overflow: hidden;
21  }
22
23  .loader-container {
24    position: absolute;
25    top: 45px;
26    left: 50%;
27    transform: translateX(-50%);
28    width: 50px;
29    height: 50px;
30  }
31
32  .loader {
33    width: 50px;
34    height: 50px;
35    border-radius: 50%;
36    position: relative;
37    animation: rotate 1.2s linear infinite;
38  }
39
40  .loader::before {
41    content: '';
42    position: absolute;
43    inset: 0;
44    border-radius: 50%;
45    border: 3px solid transparent;
46    border-top-color: white;
47    border-right-color: white;
48    border-bottom-color: rgba(255,255,255,0.1);
49    border-left-color: rgba(255,255,255,0.4);
50    animation: arc 1.2s ease-in-out infinite;
51  }
52
53  @keyframes rotate {
54    0% {
55      transform: rotate(0deg);
56    }
57    100% {
58      transform: rotate(360deg);
59    }
60  }
61
62  @keyframes arc {
63    0% {
64      transform: rotate(0deg);
65      border-top-color: white;
66      border-right-color: rgba(255,255,255,0.8);
67      border-bottom-color: transparent;
68      border-left-color: transparent;
69    }
70    50% {
71      border-top-color: white;
72      border-right-color: white;
73      border-bottom-color: rgba(255,255,255,0.3);
74      border-left-color: transparent;
75    }
76    100% {
77      transform: rotate(360deg);
78      border-top-color: white;
79      border-right-color: rgba(255,255,255,0.8);
80      border-bottom-color: transparent;
81      border-left-color: transparent;
82    }
83  }
84</style>
85</head>
86<body>
87  <div class="loader-container">
88    <div class="loader"></div>
89  </div>
90
91  <script>
92    // The animation is purely CSS-driven
93    // The spinner rotates continuously with a partial arc effect
94  </script>
95</body>
96</html>