model output
Claude Sonnet 4.6

SVG Loading icons
A 0.65T 0.26
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: #2e3b3e;
16    width: 100vw;
17    height: 100vh;
18    display: flex;
19    justify-content: center;
20    align-items: flex-start;
21    padding-top: 30px;
22  }
23
24  .spinner {
25    position: relative;
26    width: 20px;
27    height: 20px;
28    animation: rotate 1s steps(8, end) infinite;
29  }
30
31  .bar {
32    position: absolute;
33    width: 3px;
34    height: 7px;
35    background-color: #e8650a;
36    border-radius: 1px;
37    left: 50%;
38    top: 50%;
39    transform-origin: center center;
40  }
41
42  .bar:nth-child(1) {
43    transform: translateX(-50%) translateY(-50%) rotate(0deg) translateY(-6px);
44  }
45
46  .bar:nth-child(2) {
47    transform: translateX(-50%) translateY(-50%) rotate(120deg) translateY(-6px);
48  }
49
50  .bar:nth-child(3) {
51    transform: translateX(-50%) translateY(-50%) rotate(240deg) translateY(-6px);
52  }
53
54  @keyframes rotate {
55    0% { transform: rotate(0deg); }
56    100% { transform: rotate(360deg); }
57  }
58</style>
59</head>
60<body>
61  <div class="spinner">
62    <div class="bar"></div>
63    <div class="bar"></div>
64    <div class="bar"></div>
65  </div>
66</body>
67</html>