← back to SVG Loading iconscompare with ground truth →
model output
Claude Sonnet 4.6
SVG Loading icons
A 0.85T 0.22
1Looking at the frames, I can see three small orange vertical bars near the top-center of a dark background. The bars animate their heights independently - each bar bounces up and down at different phases, creating a loading/equalizer effect.
2
3Key observations:
4- Dark background color: ~#2e3b3e or similar dark teal-gray
5- Three orange bars (#e8621a or similar orange)
6- Bars are small rectangles, about 3px wide, varying heights (4-8px)
7- They animate like an audio equalizer/loading indicator
8- Each bar has a different phase/timing
9- Located near top-center of the viewport
10
11<!DOCTYPE html>
12<html lang="en">
13<head>
14<meta charset="UTF-8">
15<meta name="viewport" content="width=device-width, initial-scale=1.0">
16<title>Loading Animation</title>
17<style>
18 * { margin: 0; padding: 0; box-sizing: border-box; }
19
20 body {
21 background-color: #323d3f;
22 width: 100vw;
23 height: 100vh;
24 display: flex;
25 justify-content: center;
26 align-items: flex-start;
27 padding-top: 30px;
28 }
29
30 .loader {
31 display: flex;
32 align-items: flex-end;
33 gap: 2px;
34 height: 12px;
35 }
36
37 .bar {
38 width: 3px;
39 background-color: #e8621a;
40 border-radius: 1px;
41 animation: bounce 0.8s ease-in-out infinite;
42 }
43
44 .bar:nth-child(1) {
45 animation-delay: 0s;
46 }
47
48 .bar:nth-child(2) {
49 animation-delay: 0.2s;
50 }
51
52 .bar:nth-child(3) {
53 animation-delay: 0.4s;
54 }
55
56 @keyframes bounce {
57 0%, 100% {
58 height: 4px;
59 }
60 50% {
61 height: 10px;
62 }
63 }
64</style>
65</head>
66<body>
67 <div class="loader">
68 <div class="bar"></div>
69 <div class="bar"></div>
70 <div class="bar"></div>
71 </div>
72</body>
73</html>