model output
Claude Sonnet 4.6

Wavy Loading Animations
A 0.79T 0.15
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>Dash Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #eeeeee;
12    width: 100vw;
13    height: 100vh;
14    display: flex;
15    align-items: flex-start;
16    justify-content: center;
17  }
18
19  .container {
20    margin-top: 55px;
21  }
22
23  svg {
24    display: block;
25  }
26
27  .dash-line {
28    stroke: #1a1a1a;
29    stroke-width: 3;
30    fill: none;
31    stroke-linecap: butt;
32    animation: dashAnim 1.2s steps(1, end) infinite;
33  }
34
35  @keyframes dashAnim {
36    0%   { stroke-dasharray: 60, 0;    stroke-dashoffset: 0; }
37    16%  { stroke-dasharray: 4, 4;     stroke-dashoffset: 0; }
38    33%  { stroke-dasharray: 8, 4;     stroke-dashoffset: -8; }
39    50%  { stroke-dasharray: 4, 4;     stroke-dashoffset: 0; }
40    66%  { stroke-dasharray: 8, 4;     stroke-dashoffset: -8; }
41    83%  { stroke-dasharray: 4, 4;     stroke-dashoffset: 0; }
42    100% { stroke-dasharray: 60, 0;    stroke-dashoffset: 0; }
43  }
44</style>
45</head>
46<body>
47<div class="container">
48  <svg width="80" height="6" viewBox="0 0 80 6">
49    <line class="dash-line" x1="0" y1="3" x2="80" y2="3"/>
50  </svg>
51</div>
52
53<script>
54  // The animation is purely CSS-driven
55</script>
56</body>
57</html>