animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to flat loading animate

model output

Qwen3-VL-8B-Instruct

flat loading animate

A 0.93T 0.12
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>Animation</title>
7<style>
8  body {
9    display: flex;
10    justify-content: center;
11    align-items: center;
12    height: 100vh;
13    margin: 0;
14    background: white;
15  }
16  .dots {
17    display: flex;
18    gap: 5px;
19    position: relative;
20  }
21  .dot {
22    width: 15px;
23    height: 15px;
24    border-radius: 50%;
25    background: #00aaff;
26    animation: pulse 1.5s ease-in-out infinite alternate;
27  }
28  .dot:nth-child(1) {
29    animation-delay: 0s;
30    background: #e0f7fa;
31  }
32  .dot:nth-child(2) {
33    animation-delay: 0.2s;
34    background: #00aaff;
35  }
36  .dot:nth-child(3) {
37    animation-delay: 0.4s;
38    background: #00aaff;
39  }
40  .dot:nth-child(4) {
41    animation-delay: 0.6s;
42    background: #00aaff;
43  }
44  .dot:nth-child(5) {
45    animation-delay: 0.8s;
46    background: #e0f7fa;
47  }
48  @keyframes pulse {
49    0% {
50      transform: scale(1);
51      opacity: 0.6;
52    }
53    100% {
54      transform: scale(1.2);
55      opacity: 1;
56    }
57  }
58</style>
59</head>
60<body>
61  <div class="dots">
62    <div class="dot"></div>
63    <div class="dot"></div>
64    <div class="dot"></div>
65    <div class="dot"></div>
66    <div class="dot"></div>
67  </div>
68</body>
69</html>