model output
Claude Sonnet 4.6

CSS3 loading animations
A 0.88T 0.27
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: #141414;
16    display: flex;
17    justify-content: center;
18    align-items: flex-start;
19    height: 100vh;
20    width: 100vw;
21    overflow: hidden;
22  }
23
24  .loader {
25    display: flex;
26    gap: 3px;
27    margin-top: 14px;
28  }
29
30  .bar {
31    width: 4px;
32    height: 16px;
33    background-color: #8fa8c0;
34    border-radius: 1px;
35    animation: pulse 1.2s ease-in-out infinite;
36  }
37
38  .bar:nth-child(1) {
39    animation-delay: 0s;
40  }
41
42  .bar:nth-child(2) {
43    animation-delay: 0.2s;
44  }
45
46  .bar:nth-child(3) {
47    animation-delay: 0.4s;
48  }
49
50  @keyframes pulse {
51    0%, 100% {
52      opacity: 0.5;
53      transform: scaleY(0.8);
54    }
55    50% {
56      opacity: 1;
57      transform: scaleY(1.2);
58    }
59  }
60</style>
61</head>
62<body>
63  <div class="loader">
64    <div class="bar"></div>
65    <div class="bar"></div>
66    <div class="bar"></div>
67  </div>
68</body>
69</html>