← back to CSS3 loading animationscompare with ground truth →
model output
LLaMA 4 Scout
CSS3 loading animations
A 0.61T 0.27
1<!DOCTYPE html>
2<html>
3<head>
4 <style>
5 /* Add your CSS styles here */
6 body {
7 background-color: black;
8 }
9 #red-circle {
10 position: absolute;
11 top: 50%;
12 left: 50%;
13 transform: translate(-50%, -50%);
14 width: 20px;
15 height: 20px;
16 border-radius: 50%;
17 background-color: red;
18 animation: pulse 1s infinite;
19 }
20
21 @keyframes pulse {
22 0% {
23 transform: translate(-50%, -50%) scale(1);
24 }
25 50% {
26 transform: translate(-50%, -50%) scale(1.2);
27 }
28 100% {
29 transform: translate(-50%, -50%) scale(1);
30 }
31 }
32 </style>
33</head>
34<body>
35 <div id="red-circle"></div>
36 <script>
37 // Add your JavaScript code here
38 </script>
39</body>
40</html>