Qwen3-VL-8B-Instruct

Tiny Single Element Loading Animations
A 0.77T 0.25
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            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16        }
17        .pin {
18            width: 20px;
19            height: 20px;
20            position: relative;
21            animation: pulse 2s infinite;
22        }
23        .pin::before {
24            content: "";
25            position: absolute;
26            top: 0;
27            left: 0;
28            width: 100%;
29            height: 100%;
30            border: 1px solid #ccc;
31            border-radius: 50%;
32            animation: pulse 2s infinite;
33        }
34        .pin::after {
35            content: "";
36            position: absolute;
37            top: 50%;
38            left: 50%;
39            width: 0;
40            height: 0;
41            border-left: 5px solid transparent;
42            border-right: 5px solid transparent;
43            border-top: 5px solid #ccc;
44            transform: translate(-50%, -50%);
45            animation: pulse 2s infinite;
46        }
47        @keyframes pulse {
48            0% {
49                transform: scale(1);
50                opacity: 1;
51            }
52            50% {
53                transform: scale(1.1);
54                opacity: 0.5;
55            }
56            100% {
57                transform: scale(1);
58                opacity: 1;
59            }
60        }
61    </style>
62</head>
63<body>
64    <div class="pin"></div>
65</body>
66</html>