model output
GPT-5.4

CSS3 loading animations
A 0.92T 0.21
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" />
6<title>Minimal Blinking Green Blocks</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --on:#9be56a;
11    --off:#55684a;
12    --gap:6px;
13    --w:10px;
14    --h:11px;
15    --dur:1.15s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  .wrap{
27    position:relative;
28    width:100%;
29    height:100%;
30  }
31
32  .bars{
33    position:absolute;
34    top:9px;
35    left:50%;
36    transform:translateX(-50%);
37    display:flex;
38    gap:var(--gap);
39    filter:drop-shadow(0 0 2px rgba(155,229,106,.18));
40  }
41
42  .bar{
43    width:var(--w);
44    height:var(--h);
45    border-radius:1px;
46    background:
47      linear-gradient(90deg,
48        rgba(255,255,255,.18) 0 18%,
49        rgba(255,255,255,0) 18% 100%),
50      linear-gradient(180deg,
51        #a8ef73 0%,
52        #95df66 100%);
53    box-shadow:
54      inset 0 0 0 1px rgba(70,95,52,.45),
55      0 0 2px rgba(155,229,106,.12);
56    animation: blink var(--dur) steps(1,end) infinite;
57  }
58
59  .bar:nth-child(1){ animation-delay: 0s; }
60  .bar:nth-child(2){ animation-delay: .06s; }
61  .bar:nth-child(3){ animation-delay: .12s; }
62  .bar:nth-child(4){ animation-delay: .18s; }
63  .bar:nth-child(5){ animation-delay: .24s; }
64
65  @keyframes blink{
66    0%, 18%, 100%{
67      background:
68        linear-gradient(90deg,
69          rgba(255,255,255,.06) 0 18%,
70          rgba(255,255,255,0) 18% 100%),
71        linear-gradient(180deg,
72          #647756 0%,
73          #4f6145 100%);
74      box-shadow:
75        inset 0 0 0 1px rgba(35,45,30,.45),
76        0 0 1px rgba(155,229,106,.04);
77      opacity:.72;
78    }
79    19%, 58%{
80      background:
81        linear-gradient(90deg,
82          rgba(255,255,255,.18) 0 18%,
83          rgba(255,255,255,0) 18% 100%),
84        linear-gradient(180deg,
85          #a8ef73 0%,
86          #95df66 100%);
87      box-shadow:
88        inset 0 0 0 1px rgba(70,95,52,.45),
89        0 0 2px rgba(155,229,106,.12);
90      opacity:1;
91    }
92  }
93</style>
94</head>
95<body>
96  <div class="wrap">
97    <div class="bars" aria-hidden="true">
98      <div class="bar"></div>
99      <div class="bar"></div>
100      <div class="bar"></div>
101      <div class="bar"></div>
102      <div class="bar"></div>
103    </div>
104  </div>
105</body>
106</html>