model output
GPT-5.4

Apple Loading Bar
A 0.63T 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>Apple Boot Loading Animation</title>
7<style>
8  :root{
9    --bg:#111;
10    --white:#f5f5f5;
11    --track:#8a8a8a;
12    --fill:#f2f2f2;
13    --bar-w:min(39vw, 400px);
14    --bar-h:4px;
15    --logo-w:min(15vw, 155px);
16    --duration:8s;
17  }
18
19  *{box-sizing:border-box}
20  html,body{
21    margin:0;
22    width:100%;
23    height:100%;
24    background:var(--bg);
25    overflow:hidden;
26    font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
27  }
28
29  .scene{
30    position:relative;
31    width:100%;
32    height:100%;
33    background:var(--bg);
34  }
35
36  .wrap{
37    position:absolute;
38    left:50%;
39    top:50%;
40    transform:translate(-50%,-50%);
41    display:flex;
42    flex-direction:column;
43    align-items:center;
44  }
45
46  .logo{
47    width:var(--logo-w);
48    aspect-ratio:0.82 / 1;
49    margin-bottom:min(18vh, 170px);
50    display:block;
51    filter:drop-shadow(0 0 0 rgba(255,255,255,0.02));
52  }
53
54  .logo svg{
55    width:100%;
56    height:100%;
57    display:block;
58  }
59
60  .bar{
61    width:var(--bar-w);
62    height:var(--bar-h);
63    background:var(--track);
64    border-radius:999px;
65    overflow:hidden;
66    position:relative;
67  }
68
69  .fill{
70    height:100%;
71    width:0%;
72    background:var(--fill);
73    border-radius:999px 0 0 999px;
74    animation:load var(--duration) linear infinite;
75    transform-origin:left center;
76  }
77
78  @keyframes load{
79    0%{width:0%}
80    100%{width:46%}
81  }
82
83  /* subtle startup hold like the reference */
84  .fill::before{
85    content:"";
86    position:absolute;
87    inset:0 auto 0 0;
88    width:100%;
89    background:inherit;
90    animation:startup var(--duration) linear infinite;
91  }
92
93  @keyframes startup{
94    0%,2%{transform:scaleX(0); transform-origin:left}
95    2.0001%,100%{transform:scaleX(1)}
96  }
97</style>
98</head>
99<body>
100  <div class="scene">
101    <div class="wrap">
102      <div class="logo" aria-hidden="true">
103        <svg viewBox="0 0 170 206" xmlns="http://www.w3.org/2000/svg">
104          <path fill="#F5F5F5" d="M118.7 32.2c8.8-10.7 14.8-25.6 13.2-40.2-12.7.5-28.1 8.5-37.2 19.2-8.2 9.4-15.4 24.5-13.5 38.9 14.2 1.1 28.7-7.2 37.5-17.9z"/>
105          <path fill="#F5F5F5" d="M145.8 108.9c-.2-24.8 20.3-36.7 21.2-37.3-11.6-16.9-29.6-19.2-36-19.5-15.3-1.6-29.9 9-37.7 9-7.8 0-19.8-8.8-32.6-8.6-16.8.2-32.3 9.8-40.9 24.8-17.5 30.3-4.5 75.1 12.6 99.8 8.4 12.1 18.4 25.7 31.5 25.2 12.6-.5 17.3-8.1 32.5-8.1s19.4 8.1 32.8 7.8c13.6-.2 22.2-12.2 30.5-24.4 9.6-14 13.5-27.6 13.7-28.3-.3-.1-26.2-10.1-26.6-40.4z"/>
106        </svg>
107      </div>
108
109      <div class="bar" aria-label="Loading">
110        <div class="fill"></div>
111      </div>
112    </div>
113  </div>
114</body>
115</html>