← back to Loaders (WIP)compare with ground truth →
model output
Qwen3-VL-8B-Instruct
Loaders (WIP)
A 0.90T 0.20
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>Loading Animation</title>
7 <style>
8 body {
9 background-color: #e54d42;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 font-family: Arial, sans-serif;
16 }
17 .loader {
18 display: flex;
19 flex-direction: column;
20 align-items: center;
21 color: white;
22 font-weight: bold;
23 }
24 .bar {
25 width: 100px;
26 height: 4px;
27 background-color: white;
28 margin: 5px 0;
29 animation: loading 1.5s ease-in-out infinite;
30 }
31 @keyframes loading {
32 0%, 100% {
33 transform: scaleX(0);
34 opacity: 0.5;
35 }
36 50% {
37 transform: scaleX(1);
38 opacity: 1;
39 }
40 }
41 .text {
42 margin-top: 10px;
43 font-size: 18px;
44 }
45 </style>
46</head>
47<body>
48 <div class="loader">
49 <div class="bar"></div>
50 <div class="text">LOADING ...</div>
51 </div>
52
53 <script>
54 // Optional: Add a small delay to start the animation
55 setTimeout(() => {
56 document.querySelector('.bar').style.animationPlayState = 'running';
57 }, 100);
58 </script>
59</body>
60</html>