model output
Claude Sonnet 4.6

Loaders (WIP)
A 0.92T 0.22
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: rgba(255, 255, 255, 0.25);
25    border-radius: 2px;
26    overflow: hidden;
27    display: flex;
28    align-items: center;
29    justify-content: center;
30  }
31
32  .loader-bar {
33    position: absolute;
34    left: 0;
35    top: 0;
36    height: 100%;
37    background: white;
38    border-radius: 2px;
39    animation: loadBar 2s linear infinite;
40  }
41
42  .loader-text {
43    position: relative;
44    z-index: 2;
45    color: rgba(255, 255, 255, 0.85);
46    font-family: Arial, sans-serif;
47    font-size: 11px;
48    font-weight: bold;
49    letter-spacing: 1px;
50    white-space: nowrap;
51    mix-blend-mode: normal;
52    animation: textReveal 2s linear infinite;
53  }
54
55  @keyframes loadBar {
56    0%   { width: 0%; }
57    50%  { width: 100%; }
58    51%  { width: 0%; left: 100%; }
59    52%  { width: 0%; left: 0%; }
60    100% { width: 0%; }
61  }
62
63  @keyframes textReveal {
64    0%   { clip-path: inset(0 100% 0 0); }
65    50%  { clip-path: inset(0 0% 0 0); }
66    100% { clip-path: inset(0 100% 0 0); }
67  }
68</style>
69</head>
70<body>
71
72<div class="loader-container">
73  <div class="loader-bar"></div>
74  <span class="loader-text">LOADING ...</span>
75</div>
76
77<script>
78  // The animation uses CSS only - the white bar sweeps left to right
79  // revealing/covering the "LOADING ..." text, creating the effect seen in frames.
80  
81  // Let's use canvas approach for more precise control
82  const container = document.querySelector('.loader-container');
83  const bar = document.querySelector('.loader-bar');
84  const text = document.querySelector('.loader-text');
85  
86  // Override with JS animation for precise timing
87  container.style.overflow = 'hidden';
88  
89  let startTime = null;
90  const duration = 2000; // 2 seconds per cycle
91  
92  function animate(timestamp) {
93    if (!startTime) startTime = timestamp;
94    const elapsed = (timestamp - startTime) % duration;
95    const progress = elapsed / duration;
96    
97    // Bar sweeps from left to right (0% to 100% width)
98    const barWidth = progress * 100;
99    bar.style.width = barWidth + '%';
100    
101    requestAnimationFrame(animate);
102  }
103  
104  // Remove CSS animations and use JS
105  bar.style.animation = 'none';
106  text.style.animation = 'none';
107  text.style.clipPath = 'none';
108  text.style.color = 'rgba(255,255,255,0.7)';
109  
110  requestAnimationFrame(animate);
111</script>
112
113</body>
114</html>