model output
LLaMA 4 Scout

Simple loading indicators
A 0.75T 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>Animation</title>
7    <style>
8        .square {
9            position: absolute;
10            top: 10px;
11            left: 10px;
12            width: 50px;
13            height: 50px;
14            background-color: grey;
15            transform: rotate(0deg);
16        }
17
18        @keyframes rotate {
19            0% {
20                transform: rotate(0deg) translate(0, 0);
21                background-color: grey;
22            }
23            25% {
24                transform: rotate(45deg) translate(0, 0);
25                background-color: grey;
26            }
27            50% {
28                transform: rotate(90deg) translate(0, 0);
29                background-color: green;
30            }
31            75% {
32                transform: rotate(135deg) translate(0, 0);
33                background-color: green;
34            }
35            100% {
36                transform: rotate(180deg) translate(0, 0);
37                background-color: green;
38            }
39        }
40
41        .animate {
42            animation: rotate 8s linear infinite;
43        }
44    </style>
45</head>
46<body>
47    <div class="square" id="square"></div>
48
49    <script>
50        // Get the square element
51        const square = document.getElementById('square');
52
53        // Add the animate class to the square
54        square.classList.add('animate');
55    </script>
56</body>
57</html>