model output
LLaMA 4 Scout

flat loading animate
A 0.75T 0.17
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            width: 20px;
17            height: 20px;
18            border-radius: 50%;
19            transition: transform 0.5s ease-in-out;
20        }
21        .blue {
22            background-color: blue;
23            top: 0;
24            left: 50%;
25            transform: translateX(-50%);
26        }
27        .red {
28            background-color: red;
29            bottom: 0;
30            left: 50%;
31            transform: translateX(-50%);
32        }
33    </style>
34</head>
35<body>
36    <div class="circles">
37        <div class="circle blue" id="blue"></div>
38        <div class="circle red" id="red"></div>
39    </div>
40
41    <script>
42        let blue = document.getElementById('blue');
43        let red = document.getElementById('red');
44        let animationDuration = 2000; //ms
45        let startTime = performance.now();
46
47        function update() {
48            let currentTime = performance.now();
49            let progress = (currentTime - startTime) / animationDuration;
50
51            if (progress < 1) {
52                let offset = Math.sin(progress * Math.PI);
53                blue.style.top = `${50 + offset * 20}px`;
54                red.style.top = `${50 - offset * 20}px`;
55                requestAnimationFrame(update);
56            }
57        }
58
59        update();
60    </script>
61</body>
62</html>