animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to iOS 7 Progress Bar

model output

Qwen3-VL-8B-Instruct

iOS 7 Progress Bar

A 0.92T 0.15
compare with ground truth →
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>