LLaMA 4 Scout

Tiny Single Element Loading Animations
A 0.89T 0.20
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        body {
9            background-color: #fff;
10            margin: 0;
11            padding: 0;
12            overflow: hidden;
13        }
14        .circle {
15            position: absolute;
16            top: 10px;
17            left: 10px;
18            width: 10px;
19            height: 10px;
20            border-radius: 50%;
21            background-color: #ccc;
22        }
23    </style>
24</head>
25<body>
26    <div class="circle" id="circle"></div>
27    <script>
28        const circle = document.getElementById('circle');
29        let start = null;
30        const duration = 3000; // 3 seconds
31
32        function step(timestamp) {
33            if (!start) start = timestamp;
34            const progress = (timestamp - start) / duration;
35            if (progress >= 1) return;
36            circle.style.top = `${10 + progress * (window.innerHeight - 20)}px`;
37            requestAnimationFrame(step);
38        }
39
40        requestAnimationFrame(step);
41    </script>
42</body>
43</html>