model output
Claude Sonnet 4.6

iOS 7 Progress Bar
A 0.92T 0.54
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  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #f0f1f3;
16    display: flex;
17    justify-content: center;
18    align-items: center;
19    min-height: 100vh;
20    font-family: -apple-system, 'Helvetica Neue', sans-serif;
21  }
22
23  .container {
24    text-align: center;
25    width: 400px;
26  }
27
28  h1 {
29    color: #888;
30    font-size: 22px;
31    font-weight: 300;
32    margin-bottom: 30px;
33    letter-spacing: 0.5px;
34  }
35
36  .progress-wrapper {
37    position: relative;
38    width: 100%;
39    height: 40px;
40  }
41
42  /* Track */
43  .progress-track {
44    position: absolute;
45    top: 10px;
46    left: 0;
47    width: 100%;
48    height: 2px;
49    background-color: #d8d8d8;
50    border-radius: 2px;
51  }
52
53  /* Shadow/reflection below the bar */
54  .progress-shadow {
55    position: absolute;
56    top: 12px;
57    left: 0;
58    width: 0%;
59    height: 20px;
60    background: linear-gradient(135deg, rgba(180,180,200,0.25) 0%, transparent 70%);
61    transform: skewX(-20deg);
62    transform-origin: top left;
63    animation: shadowGrow 3s ease-out forwards;
64  }
65
66  /* Colored progress bar */
67  .progress-bar {
68    position: absolute;
69    top: 10px;
70    left: 0;
71    width: 0%;
72    height: 2px;
73    border-radius: 2px;
74    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #5856d6, #ff2d55);
75    animation: progressGrow 3s ease-out forwards;
76  }
77
78  @keyframes progressGrow {
79    0% {
80      width: 0%;
81    }
82    100% {
83      width: 100%;
84    }
85  }
86
87  @keyframes shadowGrow {
88    0% {
89      width: 0%;
90      opacity: 0.8;
91    }
92    100% {
93      width: 100%;
94      opacity: 0.3;
95    }
96  }
97</style>
98</head>
99<body>
100  <div class="container">
101    <h1>iOS 7 Progress Bar</h1>
102    <div class="progress-wrapper">
103      <div class="progress-track"></div>
104      <div class="progress-shadow"></div>
105      <div class="progress-bar"></div>
106    </div>
107  </div>
108</body>
109</html>