model output
GPT-5.4

CSS3 loading animations
A 0.85T 0.38
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 Triple Bar Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --bar:#c8d3f3;
11    --bar-shadow:#aebce8;
12    --w:8px;
13    --h:28px;
14    --gap:6px;
15    --dur:1s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  body{
27    position:relative;
28    font-family:system-ui,sans-serif;
29  }
30
31  .loader{
32    position:absolute;
33    left:50%;
34    top:14px;
35    transform:translateX(-50%);
36    display:flex;
37    gap:var(--gap);
38    align-items:flex-start;
39    justify-content:center;
40  }
41
42  .bar{
43    width:var(--w);
44    height:var(--h);
45    border-radius:0;
46    background:linear-gradient(to right,
47      rgba(255,255,255,.18) 0%,
48      var(--bar) 18%,
49      #d7e0fb 52%,
50      var(--bar-shadow) 100%);
51    animation:bob var(--dur) ease-in-out infinite;
52    transform-origin:center center;
53    box-shadow:0 0 0 1px rgba(210,220,255,.03) inset;
54  }
55
56  .bar:nth-child(2){ animation-delay:.12s; }
57  .bar:nth-child(3){ animation-delay:.24s; }
58
59  @keyframes bob{
60    0%, 100%{
61      transform:translateY(0) scaleY(1);
62      opacity:.95;
63    }
64    50%{
65      transform:translateY(3px) scaleY(1);
66      opacity:1;
67    }
68  }
69</style>
70</head>
71<body>
72  <div class="loader" aria-label="loading">
73    <div class="bar"></div>
74    <div class="bar"></div>
75    <div class="bar"></div>
76  </div>
77</body>
78</html>