model output
GPT-5.4

iOS 7 Progress Bar
A 0.91T 0.25
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>iOS 7 Progress Bar</title>
7<style>
8  :root{
9    --bg:#f7f7f7;
10    --text:#6f6f73;
11    --track:#e9eaec;
12    --shadow:rgba(0,0,0,.035);
13    --w:385px;
14    --h:4px;
15    --dur:3.2s;
16  }
17
18  html,body{
19    height:100%;
20    margin:0;
21    background:var(--bg);
22    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
23  }
24
25  body{
26    display:grid;
27    place-items:center;
28  }
29
30  .wrap{
31    width:var(--w);
32    transform:translateY(-8px);
33  }
34
35  .title{
36    margin:0 0 52px;
37    text-align:center;
38    font-size:38px;
39    font-weight:300;
40    letter-spacing:.2px;
41    color:var(--text);
42    text-shadow:0 1px 0 rgba(255,255,255,.9);
43  }
44
45  .bar{
46    position:relative;
47    width:100%;
48    height:var(--h);
49    background:var(--track);
50    overflow:visible;
51  }
52
53  .fill{
54    position:absolute;
55    inset:0 auto 0 0;
56    width:0%;
57    height:100%;
58    background:linear-gradient(90deg,
59      #39d98a 0%,
60      #4fd2ff 18%,
61      #1f8fff 42%,
62      #5b6fe5 74%,
63      #ff2d6f 100%);
64    animation:load var(--dur) cubic-bezier(.22,.61,.36,1) forwards;
65  }
66
67  .fill::after{
68    content:"";
69    position:absolute;
70    left:0;
71    top:100%;
72    width:100%;
73    height:54px;
74    background:linear-gradient(180deg, rgba(0,0,0,.045), rgba(0,0,0,0));
75    transform-origin:top left;
76    transform:skewX(42deg);
77    opacity:.55;
78    filter:blur(.2px);
79  }
80
81  @keyframes load{
82    0%   { width:0%; }
83    8%   { width:0%; }
84    22%  { width:19%; }
85    38%  { width:53%; }
86    54%  { width:76%; }
87    68%  { width:82%; }
88    82%  { width:84%; }
89    100% { width:84%; }
90  }
91
92  /* keep proportions similar on smaller screens */
93  @media (max-width: 520px){
94    :root{ --w:min(78vw,385px); }
95    .title{ font-size:clamp(28px,7vw,38px); margin-bottom:42px; }
96  }
97</style>
98</head>
99<body>
100  <div class="wrap">
101    <h1 class="title">iOS 7 Progress Bar</h1>
102    <div class="bar">
103      <div class="fill"></div>
104    </div>
105  </div>
106</body>
107</html>