model output
Claude Sonnet 4.6

Spinners using Font Icons
A 0.83T 0.32
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: 70px;
26    left: 50%;
27    transform: translateX(-50%);
28    width: 50px;
29    height: 50px;
30    animation: spin 1s linear infinite;
31  }
32
33  .loader {
34    width: 50px;
35    height: 50px;
36    border-radius: 50%;
37    background: conic-gradient(
38      white 0deg,
39      white 70deg,
40      transparent 70deg,
41      transparent 90deg,
42      white 90deg,
43      white 160deg,
44      transparent 160deg,
45      transparent 180deg,
46      white 180deg,
47      white 250deg,
48      transparent 250deg,
49      transparent 270deg,
50      white 270deg,
51      white 340deg,
52      transparent 340deg,
53      transparent 360deg
54    );
55    -webkit-mask: radial-gradient(circle, transparent 14px, black 15px, black 24px, transparent 25px);
56    mask: radial-gradient(circle, transparent 14px, black 15px, black 24px, transparent 25px);
57  }
58
59  @keyframes spin {
60    from {
61      transform: translateX(-50%) rotate(0deg);
62    }
63    to {
64      transform: translateX(-50%) rotate(360deg);
65    }
66  }
67</style>
68</head>
69<body>
70  <div class="loader-container">
71    <div class="loader"></div>
72  </div>
73</body>
74</html>