model output
Claude Sonnet 4.6

CSS3 loading animations
A 0.82T 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: #0f0f0f;
16    width: 100vw;
17    height: 100vh;
18    display: flex;
19    justify-content: center;
20    align-items: flex-start;
21    padding-top: 60px;
22  }
23
24  .bars-container {
25    display: flex;
26    gap: 4px;
27    align-items: center;
28    height: 40px;
29  }
30
31  .bar {
32    width: 4px;
33    border-radius: 2px;
34    background-color: #555;
35    animation: barPulse 1.2s ease-in-out infinite;
36  }
37
38  .bar:nth-child(1) { height: 28px; animation-delay: 0s; }
39  .bar:nth-child(2) { height: 28px; animation-delay: 0.15s; }
40  .bar:nth-child(3) { height: 28px; animation-delay: 0.3s; }
41  .bar:nth-child(4) { height: 28px; animation-delay: 0.45s; }
42  .bar:nth-child(5) { height: 28px; animation-delay: 0.6s; }
43
44  @keyframes barPulse {
45    0%, 100% {
46      opacity: 0.3;
47      transform: scaleY(0.6);
48    }
49    50% {
50      opacity: 0.7;
51      transform: scaleY(1);
52    }
53  }
54</style>
55</head>
56<body>
57  <div class="bars-container">
58    <div class="bar"></div>
59    <div class="bar"></div>
60    <div class="bar"></div>
61    <div class="bar"></div>
62    <div class="bar"></div>
63  </div>
64</body>
65</html>