← back to SVG Loading iconscompare with ground truth →
model output
Claude Sonnet 4.6
SVG Loading icons
A 0.84T 0.22
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 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 background-color: #2e3b3e;
16 width: 100vw;
17 height: 100vh;
18 display: flex;
19 align-items: flex-start;
20 justify-content: center;
21 overflow: hidden;
22 }
23
24 .spinner-container {
25 position: absolute;
26 top: 45px;
27 left: 50%;
28 transform: translateX(-50%);
29 }
30
31 .spinner {
32 width: 16px;
33 height: 16px;
34 border: 2px solid transparent;
35 border-top-color: #f07800;
36 border-right-color: #f07800;
37 border-radius: 50%;
38 animation: spin 1s linear infinite;
39 }
40
41 @keyframes spin {
42 0% {
43 transform: rotate(0deg);
44 }
45 100% {
46 transform: rotate(360deg);
47 }
48 }
49</style>
50</head>
51<body>
52 <div class="spinner-container">
53 <div class="spinner"></div>
54 </div>
55</body>
56</html>