← back to Apple Loading Barcompare with ground truth →
model output
Gemini 3 Flash Preview
Apple Loading Bar
A 0.62T 0.23
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>Apple Boot Animation</title>
7 <style>
8 /* Reset and Base Styles */
9 body, html {
10 margin: 0;
11 padding: 0;
12 width: 100%;
13 height: 100%;
14 background-color: #0c0c0c; /* Matches the deep black/near-black background */
15 display: flex;
16 justify-content: center;
17 align-items: center;
18 overflow: hidden;
19 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
20 }
21
22 .container {
23 display: flex;
24 flex-direction: column;
25 align-items: center;
26 /* Slight upward offset typical of the Apple boot screen */
27 transform: translateY(-20px);
28 }
29
30 /* Apple Logo Styling */
31 .logo {
32 width: 90px;
33 height: auto;
34 fill: #ffffff;
35 margin-bottom: 70px;
36 }
37
38 /* Progress Bar Container */
39 .progress-container {
40 width: 210px;
41 height: 4px;
42 background-color: #333333; /* Dark grey track */
43 border-radius: 10px;
44 overflow: hidden;
45 position: relative;
46 }
47
48 /* Progress Bar Fill */
49 .progress-fill {
50 height: 100%;
51 width: 0%;
52 background-color: #ffffff;
53 border-radius: 10px;
54 /* Using a multi-stage keyframe animation to simulate realistic loading "stutter" seen in the video */
55 animation: bootProgress 15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
56 }
57
58 /*
59 Keyframes based on the provided video timing:
60 - 0s to 7.5s shows a slow, slightly irregular crawl.
61 - We extrapolate the rest to complete the 'boot'.
62 */
63 @keyframes bootProgress {
64 0% { width: 0%; }
65 5% { width: 2%; }
66 10% { width: 8%; }
67 20% { width: 14%; }
68 30% { width: 19%; }
69 40% { width: 26%; }
70 50% { width: 42%; } /* ~7.5s mark in the video is roughly here */
71 60% { width: 45%; } /* Simulated pause/slowdown common in OS loading */
72 75% { width: 70%; }
73 85% { width: 92%; }
74 95% { width: 98%; }
75 100% { width: 100%; }
76 }
77
78 /* Subtle Fade in for the whole screen */
79 .fade-in {
80 animation: fadeInScreen 1.5s ease-out forwards;
81 }
82
83 @keyframes fadeInScreen {
84 from { opacity: 0; }
85 to { opacity: 1; }
86 }
87 </style>
88</head>
89<body>
90
91 <div class="container fade-in">
92 <!-- Apple Logo SVG -->
93 <svg class="logo" viewBox="0 0 170 200" xmlns="http://www.w3.org/2000/svg">
94 <path d="M150.37,130.25c-2.45,5.66-5.35,10.87-8.71,15.66c-8.58,12.25-17.41,24.31-30.84,24.57c-13.15,0.27-17.38-7.69-32.36-7.69 c-14.95,0-19.64,7.44-32.11,7.93c-12.87,0.54-23.01-13.17-31.66-25.6c-17.69-25.44-31.13-71.86-12.68-103.85 c9.16-15.87,25.5-25.92,43.33-26.18c13.63-0.23,26.47,9.2,34.82,9.2c8.35,0,23.88-11.45,40.17-9.8 c6.82,0.28,25.93,2.74,38.25,20.73c-1,0.61-22.86,13.3-22.86,39.69c0,31.62,25.74,42.87,26.04,43.01 C154.59,120.4,152.82,124.58,150.37,130.25z M119.11,31.23c7.31-8.87,12.23-21.21,10.89-33.52c-10.58,0.42-23.39,7.05-30.98,15.86 c-6.81,7.9-12.76,20.47-11.14,32.53C99.2,47.01,111.8,40.1,119.11,31.23z"></path>
95 </svg>
96
97 <!-- Progress Bar -->
98 <div class="progress-container">
99 <div class="progress-fill"></div>
100 </div>
101 </div>
102
103 <script>
104 // Optional: Interaction to restart the animation if clicked
105 document.body.addEventListener('click', () => {
106 const fill = document.querySelector('.progress-fill');
107 fill.style.animation = 'none';
108 fill.offsetHeight; /* trigger reflow */
109 fill.style.animation = null;
110 });
111 </script>
112</body>
113</html>