model output
GPT-5.4

Animated Concepts #3
A 0.89T 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>Minimal Bar Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --bar:#ff7f79;
11    --w:5px;
12    --h:50px;
13    --gap:6px;
14    --dur:0.9s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    background:var(--bg);
22    overflow:hidden;
23  }
24
25  body{
26    display:grid;
27    place-items:center;
28  }
29
30  .loader{
31    display:flex;
32    align-items:center;
33    justify-content:center;
34    gap:var(--gap);
35    transform:translateY(-2px);
36  }
37
38  .bar{
39    width:var(--w);
40    height:var(--h);
41    background:var(--bar);
42    border-radius:999px;
43    transform-origin:center center;
44    animation: sway var(--dur) ease-in-out infinite;
45    box-shadow:0 0 0.5px rgba(255,127,121,.7);
46  }
47
48  .bar:nth-child(1){ animation-delay:0s; }
49  .bar:nth-child(2){ animation-delay:-0.12s; }
50  .bar:nth-child(3){ animation-delay:-0.24s; }
51
52  @keyframes sway{
53    0%,100%{
54      transform:translateY(0) scaleY(1);
55    }
56    20%{
57      transform:translateY(10px) scaleY(1);
58    }
59    50%{
60      transform:translateY(-10px) scaleY(1);
61    }
62    80%{
63      transform:translateY(6px) scaleY(1);
64    }
65  }
66</style>
67</head>
68<body>
69  <div class="loader" aria-label="loading">
70    <div class="bar"></div>
71    <div class="bar"></div>
72    <div class="bar"></div>
73  </div>
74</body>
75</html>