← back to iOS 7 Progress Barcompare with ground truth →
model output
Gemini 3 Flash Preview
iOS 7 Progress Bar
A 0.93T 0.30
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 Animation</title>
7 <style>
8 :root {
9 --bg-color: #f5f6f8;
10 --text-color: #8e8e93;
11 --track-color: #e5e5ea;
12 /* iOS 7 palette gradient colors */
13 --rainbow-gradient: linear-gradient(to right,
14 #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6,
15 #ff2d55, #ff3b30, #ff9500, #ffcc00, #4cd964
16 );
17 }
18
19 * {
20 margin: 0;
21 padding: 0;
22 box-sizing: border-box;
23 }
24
25 body {
26 display: flex;
27 justify-content: center;
28 align-items: center;
29 height: 100vh;
30 background-color: var(--bg-color);
31 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
32 overflow: hidden;
33 }
34
35 .container {
36 text-align: center;
37 width: 100%;
38 max-width: 400px;
39 padding: 20px;
40 position: relative;
41 }
42
43 .title {
44 color: var(--text-color);
45 font-size: 28px;
46 font-weight: 300;
47 margin-bottom: 40px;
48 letter-spacing: 0.5px;
49 opacity: 0.9;
50 }
51
52 .progress-track {
53 position: relative;
54 width: 100%;
55 height: 2px;
56 background-color: var(--track-color);
57 border-radius: 1px;
58 overflow: visible;
59 }
60
61 /* The moving rainbow bar */
62 .progress-bar {
63 position: absolute;
64 top: 0;
65 left: 0;
66 height: 100%;
67 width: 0%;
68 background: var(--rainbow-gradient);
69 background-size: 200% 100%;
70 border-radius: 1px;
71 /* Main filling animation and the internal gradient shift */
72 animation:
73 fillProgress 4s ease-in-out forwards,
74 shiftGradient 2s linear infinite;
75 }
76
77 /* The soft colored glow/reflection underneath */
78 .progress-bar::after {
79 content: '';
80 position: absolute;
81 top: 10px;
82 left: 0;
83 width: 100%;
84 height: 100%;
85 background: inherit;
86 background-size: inherit;
87 filter: blur(15px);
88 opacity: 0.4;
89 transform: scaleY(2);
90 animation: shiftGradient 2s linear infinite;
91 }
92
93 /* Subtle long shadow for depth across the UI */
94 .container::after {
95 content: '';
96 position: absolute;
97 top: 60px;
98 left: 50%;
99 width: 120%;
100 height: 150px;
101 background: linear-gradient(135deg, rgba(0,0,0,0.03) 0%, transparent 50%);
102 transform: translateX(-50%) rotate(-5deg);
103 pointer-events: none;
104 z-index: -1;
105 }
106
107 @keyframes fillProgress {
108 0% {
109 width: 0%;
110 }
111 10% {
112 width: 5%;
113 }
114 40% {
115 width: 35%;
116 }
117 70% {
118 width: 85%;
119 }
120 100% {
121 width: 100%;
122 }
123 }
124
125 @keyframes shiftGradient {
126 0% {
127 background-position: 0% 0%;
128 }
129 100% {
130 background-position: -200% 0%;
131 }
132 }
133 </style>
134</head>
135<body>
136
137 <div class="container">
138 <h1 class="title">iOS 7 Progress Bar</h1>
139 <div class="progress-track">
140 <div class="progress-bar"></div>
141 </div>
142 </div>
143
144 <script>
145 // Refresh the animation every 6 seconds for demonstration purposes
146 const progressBar = document.querySelector('.progress-bar');
147
148 function restartAnimation() {
149 progressBar.style.animation = 'none';
150 progressBar.offsetHeight; // trigger reflow
151 progressBar.style.animation = null;
152 }
153
154 // Optional: uncomment to loop the animation automatically
155 // setInterval(restartAnimation, 6000);
156 </script>
157</body>
158</html>