← back to Loaders (WIP)compare with ground truth →
model output
Qwen3-VL-8B-Instruct
Loaders (WIP)
A 0.80T 0.27
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>Rotating Clock Animation</title>
7<style>
8 body {
9 background-color: #e64a19;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .clock {
17 width: 60px;
18 height: 60px;
19 border: 2px solid white;
20 border-radius: 50%;
21 position: relative;
22 animation: rotateClock 6s linear infinite;
23 }
24 .hand {
25 position: absolute;
26 top: 50%;
27 left: 50%;
28 transform-origin: 50% 50%;
29 width: 0;
30 height: 0;
31 border-left: 10px solid transparent;
32 border-right: 10px solid transparent;
33 border-top: 20px solid white;
34 z-index: 2;
35 }
36 .hour-hand {
37 transform: rotate(0deg);
38 animation: rotateHour 6s linear infinite;
39 border-top-color: #fff;
40 border-top-width: 15px;
41 border-left-width: 5px;
42 border-right-width: 5px;
43 }
44 .minute-hand {
45 transform: rotate(0deg);
46 animation: rotateMinute 6s linear infinite;
47 border-top-color: #fff;
48 border-top-width: 10px;
49 border-left-width: 3px;
50 border-right-width: 3px;
51 }
52 @keyframes rotateClock {
53 0% { transform: rotate(0deg); }
54 100% { transform: rotate(360deg); }
55 }
56 @keyframes rotateHour {
57 0% { transform: rotate(0deg); }
58 100% { transform: rotate(30deg); }
59 }
60 @keyframes rotateMinute {
61 0% { transform: rotate(0deg); }
62 100% { transform: rotate(360deg); }
63 }
64</style>
65</head>
66<body>
67 <div class="clock">
68 <div class="hand hour-hand"></div>
69 <div class="hand minute-hand"></div>
70 </div>
71</body>
72</html>