← back to iOS 7 Progress Barcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
iOS 7 Progress Bar
A 0.92T 0.15
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 body {
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 background-color: #f5f5f5;
14 font-family: -apple-system, BlinkMacSystemFont, sans-serif;
15 margin: 0;
16 }
17 .progress-container {
18 text-align: center;
19 }
20 .progress-text {
21 font-size: 18px;
22 color: #777;
23 margin-bottom: 10px;
24 }
25 .progress-bar {
26 width: 300px;
27 height: 6px;
28 background-color: #e0e0e0;
29 border-radius: 3px;
30 position: relative;
31 overflow: hidden;
32 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
33 }
34 .progress-fill {
35 height: 100%;
36 background: linear-gradient(to right, #2ecc71, #3498db, #9b59b6, #e74c3c);
37 border-radius: 3px;
38 width: 0%;
39 transition: width 1.5s ease-out;
40 }
41 </style>
42</head>
43<body>
44 <div class="progress-container">
45 <div class="progress-text">iOS 7 Progress Bar</div>
46 <div class="progress-bar">
47 <div class="progress-fill"></div>
48 </div>
49 </div>
50
51 <script>
52 const progressBar = document.querySelector('.progress-fill');
53 setTimeout(() => {
54 progressBar.style.width = '100%';
55 }, 100);
56 </script>
57</body>
58</html>