model output
GPT-5.4

Wavy Loading Animations
A 0.89T 0.14
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>Minimal Loading Dashes</title>
7<style>
8  :root{
9    --bg:#f3f3f3;
10    --dark:#222;
11    --mid:#8f8f8f;
12    --count:9;
13    --w:7px;
14    --h:4px;
15    --gap:4px;
16    --dur:1s;
17  }
18
19  html,body{
20    margin:0;
21    width:100%;
22    height:100%;
23    background:var(--bg);
24    overflow:hidden;
25    font-family:sans-serif;
26  }
27
28  .stage{
29    position:relative;
30    width:100%;
31    height:100%;
32    background:var(--bg);
33  }
34
35  .loader{
36    position:absolute;
37    left:50%;
38    top:58px;
39    transform:translateX(-50%);
40    display:flex;
41    gap:var(--gap);
42    align-items:center;
43    justify-content:center;
44  }
45
46  .dash{
47    width:var(--w);
48    height:var(--h);
49    background:#a8a8a8;
50    border-radius:0;
51    animation: pulse var(--dur) linear infinite;
52  }
53
54  /* moving dark segment across the row */
55  .dash:nth-child(1){ animation-delay: calc(-8 * var(--dur) / var(--count)); }
56  .dash:nth-child(2){ animation-delay: calc(-7 * var(--dur) / var(--count)); }
57  .dash:nth-child(3){ animation-delay: calc(-6 * var(--dur) / var(--count)); }
58  .dash:nth-child(4){ animation-delay: calc(-5 * var(--dur) / var(--count)); }
59  .dash:nth-child(5){ animation-delay: calc(-4 * var(--dur) / var(--count)); }
60  .dash:nth-child(6){ animation-delay: calc(-3 * var(--dur) / var(--count)); }
61  .dash:nth-child(7){ animation-delay: calc(-2 * var(--dur) / var(--count)); }
62  .dash:nth-child(8){ animation-delay: calc(-1 * var(--dur) / var(--count)); }
63  .dash:nth-child(9){ animation-delay: calc( 0 * var(--dur) / var(--count)); }
64
65  @keyframes pulse{
66    0%, 100%{
67      background:#a8a8a8;
68      opacity:.95;
69    }
70    18%{
71      background:#222;
72      opacity:1;
73    }
74    36%{
75      background:#4a4a4a;
76      opacity:1;
77    }
78    60%{
79      background:#8f8f8f;
80      opacity:.98;
81    }
82  }
83</style>
84</head>
85<body>
86  <div class="stage">
87    <div class="loader" aria-label="loading">
88      <span class="dash"></span>
89      <span class="dash"></span>
90      <span class="dash"></span>
91      <span class="dash"></span>
92      <span class="dash"></span>
93      <span class="dash"></span>
94      <span class="dash"></span>
95      <span class="dash"></span>
96      <span class="dash"></span>
97    </div>
98  </div>
99</body>
100</html>