model output
LLaMA 4 Scout

Simple loading indicators
A 0.68T 0.25
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: 20px;
13            height: 20px;
14            background-color: grey;
15            animation: grow 1s;
16        }
17
18        @keyframes grow {
19            0% {
20                transform: scale(1);
21                background-color: grey;
22            }
23            33% {
24                transform: scale(1);
25                background-color: grey;
26            }
27            66% {
28                transform: scale(1);
29                background-color: green;
30            }
31            100% {
32                transform: scale(1);
33                background-color: green;
34            }
35        }
36
37        .square-grow {
38            animation-name: grow-square;
39        }
40
41        @keyframes grow-square {
42            0% {
43                height: 20px;
44                width: 20px;
45                top: 0px;
46                background-color: grey;
47            }
48            25% {
49                height: 20px;
50                width: 20px;
51                top: 0px;
52                background-color: grey;
53            }
54            50% {
55                height: 40px;
56                width: 20px;
57                top: -10px;
58                background-color: green;
59            }
60            100% {
61                height: 40px;
62                width: 20px;
63                top: -10px;
64                background-color: green;
65            }
66        }
67    </style>
68</head>
69<body>
70    <div class="square" style="animation-delay: 0s;"></div>
71    <script>
72        // empty script
73    </script>
74</body>
75</html>