model output
Claude Sonnet 4.6

Loaders (WIP)
A 0.92T 0.19
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  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #e8473a;
12    width: 100vw;
13    height: 100vh;
14    display: flex;
15    align-items: flex-start;
16    justify-content: center;
17    padding-top: 85px;
18  }
19
20  .loader-container {
21    position: relative;
22    width: 150px;
23    height: 22px;
24    background-color: rgba(220, 100, 90, 0.5);
25    border-radius: 2px;
26    overflow: hidden;
27  }
28
29  .loader-bar {
30    position: absolute;
31    top: 0;
32    left: 0;
33    height: 100%;
34    background-color: white;
35    border-radius: 2px;
36    animation: loadingBar 2s ease-in-out infinite;
37  }
38
39  .loader-text {
40    position: absolute;
41    top: 0;
42    left: 0;
43    width: 100%;
44    height: 100%;
45    display: flex;
46    align-items: center;
47    justify-content: center;
48    color: rgba(255, 255, 255, 0.9);
49    font-family: Arial, sans-serif;
50    font-size: 11px;
51    font-weight: bold;
52    letter-spacing: 1px;
53    animation: textFade 2s ease-in-out infinite;
54    white-space: nowrap;
55  }
56
57  @keyframes loadingBar {
58    0% {
59      width: 0%;
60    }
61    70% {
62      width: 100%;
63    }
64    85% {
65      width: 100%;
66    }
67    100% {
68      width: 0%;
69    }
70  }
71
72  @keyframes textFade {
73    0% {
74      opacity: 1;
75    }
76    65% {
77      opacity: 1;
78    }
79    75% {
80      opacity: 0;
81    }
82    90% {
83      opacity: 0;
84    }
85    100% {
86      opacity: 1;
87    }
88  }
89</style>
90</head>
91<body>
92  <div class="loader-container">
93    <div class="loader-bar"></div>
94    <div class="loader-text">LOADING ...</div>
95  </div>
96</body>
97</html>