model output
Claude Sonnet 4.6

Loaders (WIP)
A 0.90T 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: #e8473a;
16    width: 100vw;
17    height: 100vh;
18    display: flex;
19    align-items: flex-start;
20    justify-content: center;
21    padding-top: 80px;
22  }
23
24  .loader-container {
25    display: flex;
26    align-items: center;
27    gap: 12px;
28  }
29
30  .bars {
31    display: flex;
32    flex-direction: column;
33    gap: 4px;
34  }
35
36  .bar {
37    height: 3px;
38    background-color: white;
39    border-radius: 1px;
40    animation: expand 2s ease-in-out infinite;
41  }
42
43  .bar:nth-child(1) {
44    animation-delay: 0s;
45  }
46
47  .bar:nth-child(2) {
48    animation-delay: 0.1s;
49  }
50
51  @keyframes expand {
52    0% {
53      width: 2px;
54    }
55    80% {
56      width: 140px;
57    }
58    90% {
59      width: 140px;
60      opacity: 1;
61    }
62    100% {
63      width: 140px;
64      opacity: 0.3;
65    }
66  }
67
68  .loading-text {
69    color: white;
70    font-family: Arial, sans-serif;
71    font-size: 14px;
72    font-weight: 400;
73    letter-spacing: 1px;
74    white-space: nowrap;
75    animation: textFade 2s ease-in-out infinite;
76  }
77
78  @keyframes textFade {
79    0% { opacity: 1; }
80    90% { opacity: 1; }
81    100% { opacity: 0.3; }
82  }
83</style>
84</head>
85<body>
86  <div class="loader-container">
87    <div class="bars">
88      <div class="bar"></div>
89      <div class="bar"></div>
90    </div>
91    <div class="loading-text">LOADING ...</div>
92  </div>
93</body>
94</html>