← back to SVG Loading iconscompare with ground truth →
model output
Claude Sonnet 4.6
SVG Loading icons
A 0.88T 0.30
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: #2e3c3f;
16 display: flex;
17 justify-content: center;
18 align-items: flex-start;
19 height: 100vh;
20 width: 100vw;
21 }
22
23 .loader {
24 width: 20px;
25 height: 20px;
26 border: 2px solid transparent;
27 border-top-color: #e8720c;
28 border-right-color: #e8720c;
29 border-radius: 50%;
30 position: absolute;
31 top: 35px;
32 left: 50%;
33 transform: translateX(-50%);
34 animation: spin 1s linear infinite;
35 }
36
37 @keyframes spin {
38 0% {
39 transform: translateX(-50%) rotate(0deg);
40 }
41 100% {
42 transform: translateX(-50%) rotate(360deg);
43 }
44 }
45</style>
46</head>
47<body>
48 <div class="loader"></div>
49</body>
50</html>