Qwen3-VL-8B-Instruct

Tiny Single Element Loading Animations
A 0.83T 0.23
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            margin: 0;
10            padding: 0;
11            background-color: white;
12            overflow: hidden;
13        }
14        .sun {
15            position: absolute;
16            top: 20px;
17            left: 20px;
18            width: 20px;
19            height: 20px;
20            border-radius: 50%;
21            border: 1px solid #ccc;
22            animation: pulse 2s infinite alternate;
23        }
24        @keyframes pulse {
25            0% {
26                transform: scale(1);
27            }
28            100% {
29                transform: scale(1.2);
30            }
31        }
32    </style>
33</head>
34<body>
35    <div class="sun"></div>
36
37    <script>
38        const sun = document.querySelector('.sun');
39        let animationInterval = setInterval(() => {
40            sun.style.animationDuration = (Math.random() * 1 + 1) + 's';
41            sun.style.animationTimingFunction = Math.random() > 0.5 ? 'ease-in' : 'ease-out';
42        }, 3000);
43
44        setTimeout(() => {
45            clearInterval(animationInterval);
46        }, 10000);
47    </script>
48</body>
49</html>