model output
LLaMA 4 Scout

flat loading animate
A 0.66T 0.36
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        .circles {
9            position: relative;
10            width: 100px;
11            height: 100px;
12            margin: 50px auto;
13        }
14        .circle {
15            position: absolute;
16            border-radius: 50%;
17            transition: transform 1s ease-in-out;
18        }
19        #red-circle {
20            background-color: red;
21            width: 40px;
22            height: 40px;
23            top: 30px;
24            left: 30px;
25        }
26        #blue-circle {
27            background-color: blue;
28            width: 40px;
29            height: 40px;
30            top: 30px;
31            right: 30px;
32        }
33    </style>
34</head>
35<body>
36    <div class="circles">
37        <div id="red-circle" class="circle"></div>
38        <div id="blue-circle" class="circle"></div>
39    </div>
40
41    <script>
42        let redCircle = document.getElementById('red-circle');
43        let blueCircle = document.getElementById('blue-circle');
44        let scale = 1;
45        let direction = 1;
46
47        function animate() {
48            scale += 0.01 * direction;
49            if (scale > 1.2) {
50                direction = -1;
51            } else if (scale < 0.8) {
52                direction = 1;
53            }
54
55            redCircle.style.transform = `scale(${scale})`;
56            blueCircle.style.transform = `scale(${1/scale})`;
57
58            requestAnimationFrame(animate);
59        }
60
61        animate();
62    </script>
63</body>
64</html>