Qwen3-VL-8B-Instruct

Tiny Single Element Loading Animations

A 0.69T 0.19

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        .circle {
15            position: absolute;
16            top: 10px;
17            left: 10px;
18            width: 20px;
19            height: 20px;
20            border-radius: 50%;
21            background-color: #ccc;
22            transition: transform 0.5s ease;
23        }
24        .circle:hover {
25            transform: scale(1.5) rotate(360deg);
26        }
27    </style>
28</head>
29<body>
30    <div class="circle"></div>
31
32    <script>
33        const circle = document.querySelector('.circle');
34        let rotation = 0;
35
36        function animate() {
37            rotation += 1;
38            circle.style.transform = `rotate(${rotation}deg)`;
39            requestAnimationFrame(animate);
40        }
41
42        animate();
43    </script>
44</body>
45</html>