ground truth

SVG Loading icons

csssource ↗

model outputs

Gemini 3 Flash Preview →

A 0.82T 0.26

Qwen3-VL-8B-Instruct →

A 0.75T 0.17

GPT-5.4 →

A 0.84T 0.29

Claude Sonnet 4.6 →

A 0.85T 0.27

LLaMA 4 Scout →

A 0.80T 0.26

1<div class="loader loader--style8" title="7">
2  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
3     width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
4    <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
5      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" />
6      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
7      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
8    </rect>
9    <rect x="8" y="10" width="4" height="10" fill="#333"  opacity="0.2">
10      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
11      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
12      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
13    </rect>
14    <rect x="16" y="10" width="4" height="10" fill="#333"  opacity="0.2">
15      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
16      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
17      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
18    </rect>
19  </svg>
20</div>
21