model output
Claude Sonnet 4.6

SVG Loading icons
A 0.72T 0.24
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</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #2e3d42;
16    display: flex;
17    justify-content: center;
18    align-items: flex-start;
19    padding-top: 30px;
20    min-height: 100vh;
21  }
22
23  .spinner-container {
24    position: relative;
25    width: 20px;
26    height: 20px;
27    margin-top: 10px;
28  }
29
30  .spinner-ring {
31    width: 20px;
32    height: 20px;
33    border-radius: 50%;
34    border: 1.5px solid rgba(80, 90, 95, 0.6);
35    position: absolute;
36    top: 0;
37    left: 0;
38  }
39
40  .spinner-dot {
41    position: absolute;
42    width: 20px;
43    height: 20px;
44    top: 0;
45    left: 0;
46    animation: spin 1.2s linear infinite;
47  }
48
49  .spinner-dot::after {
50    content: '';
51    position: absolute;
52    width: 3px;
53    height: 3px;
54    background-color: #e8720c;
55    border-radius: 50%;
56    top: -1.5px;
57    left: 50%;
58    transform: translateX(-50%);
59  }
60
61  @keyframes spin {
62    0% {
63      transform: rotate(0deg);
64    }
65    100% {
66      transform: rotate(360deg);
67    }
68  }
69</style>
70</head>
71<body>
72  <div class="spinner-container">
73    <div class="spinner-ring"></div>
74    <div class="spinner-dot"></div>
75  </div>
76</body>
77</html>