← back to Apple Loading Barcompare with ground truth →
model output
LLaMA 4 Scout
Apple Loading Bar
A 0.61T 0.22
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Apple Logo Animation</title>
5 <style>
6 body {
7 background-color: #000;
8 display: flex;
9 justify-content: center;
10 align-items: center;
11 height: 100vh;
12 margin: 0;
13 overflow: hidden;
14 }
15 .apple-logo {
16 width: 200px;
17 height: 200px;
18 background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Apple_logo_white.svg/1024px-Apple_logo_white.svg.png');
19 background-size: contain;
20 background-position: center;
21 background-repeat: no-repeat;
22 }
23 .progress-bar {
24 width: 80%;
25 height: 5px;
26 background-color: #ccc;
27 margin-top: 20px;
28 }
29 .progress {
30 width: 0%;
31 height: 5px;
32 background-color: #fff;
33 transition: width 1s linear;
34 }
35 </style>
36</head>
37<body>
38 <div class="apple-logo"></div>
39 <div class="progress-bar">
40 <div class="progress"></div>
41 </div>
42
43 <script>
44 let progress = 0;
45 const progressBar = document.querySelector('.progress');
46 const interval = setInterval(() => {
47 progress += 1.5;
48 progressBar.style.width = `${progress}%`;
49 if (progress >= 100) {
50 clearInterval(interval);
51 }
52 }, 30);
53 </script>
54</body>
55</html>