model output
GPT-5.4

CSS3 loading animations
A 0.85T 0.11
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>Loading Shadow Sweep</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --text:#3a3a3a;
11    --shadow:#0f0f0f;
12    --highlight:rgba(255,255,255,.08);
13    --duration:2.2s;
14  }
15
16  *{box-sizing:border-box}
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    background:var(--bg);
22    overflow:hidden;
23    font-family: Arial, Helvetica, sans-serif;
24  }
25
26  body{
27    display:flex;
28    justify-content:center;
29    align-items:flex-start;
30  }
31
32  .wrap{
33    margin-top:48px;
34    position:relative;
35    display:inline-block;
36  }
37
38  .loading{
39    position:relative;
40    margin:0;
41    font-size:64px;
42    line-height:1;
43    font-weight:700;
44    letter-spacing:.34em;
45    color:var(--text);
46    text-transform:uppercase;
47    user-select:none;
48    filter:
49      drop-shadow(0 1px 0 rgba(255,255,255,.02))
50      drop-shadow(0 8px 10px rgba(0,0,0,.18));
51  }
52
53  /* soft embossed base */
54  .loading::before{
55    content:"LOADING";
56    position:absolute;
57    inset:0;
58    color:transparent;
59    text-shadow:
60      -2px -2px 2px rgba(255,255,255,.02),
61       3px 4px 8px rgba(0,0,0,.55),
62       0 0 14px rgba(0,0,0,.35);
63    pointer-events:none;
64  }
65
66  /* moving dark sweep / shadow */
67  .loading::after{
68    content:"LOADING";
69    position:absolute;
70    inset:0;
71    color:transparent;
72    background:
73      linear-gradient(100deg,
74        rgba(0,0,0,.78) 0%,
75        rgba(0,0,0,.78) 22%,
76        rgba(0,0,0,.18) 38%,
77        rgba(255,255,255,.05) 48%,
78        rgba(0,0,0,.22) 58%,
79        rgba(0,0,0,.82) 76%,
80        rgba(0,0,0,.82) 100%);
81    -webkit-background-clip:text;
82    background-clip:text;
83    filter: blur(2px);
84    transform: translateX(-120%);
85    animation: sweep var(--duration) cubic-bezier(.42,0,.58,1) infinite;
86    pointer-events:none;
87  }
88
89  @keyframes sweep{
90    0%   { transform:translateX(-120%); }
91    12%  { transform:translateX(-92%); }
92    24%  { transform:translateX(-58%); }
93    36%  { transform:translateX(-22%); }
94    50%  { transform:translateX(12%); }
95    64%  { transform:translateX(46%); }
96    78%  { transform:translateX(82%); }
97    100% { transform:translateX(120%); }
98  }
99
100  @media (max-width: 900px){
101    .loading{font-size:48px}
102    .wrap{margin-top:40px}
103  }
104</style>
105</head>
106<body>
107  <div class="wrap">
108    <h1 class="loading">LOADING</h1>
109  </div>
110</body>
111</html>