model output
Qwen3-VL-8B-Instruct

Loaders (WIP)
A 0.67T 0.00
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: #e55353;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .dots {
17    display: flex;
18    justify-content: center;
19    align-items: center;
20    gap: 5px;
21    position: relative;
22  }
23  .dot {
24    width: 10px;
25    height: 10px;
26    border-radius: 50%;
27    background-color: white;
28    transition: transform 0.3s ease, opacity 0.3s ease;
29  }
30  .dot:nth-child(1) {
31    background-color: #e55353;
32  }
33  .dot:nth-child(2) {
34    background-color: white;
35  }
36  .dot:nth-child(3) {
37    background-color: #e55353;
38  }
39  .dot.active {
40    transform: scale(1.5);
41    opacity: 1;
42  }
43  .dot.inactive {
44    transform: scale(0.8);
45    opacity: 0.5;
46  }
47</style>
48</head>
49<body>
50  <div class="dots">
51    <div class="dot"></div>
52    <div class="dot"></div>
53    <div class="dot"></div>
54  </div>
55
56  <script>
57    const dots = document.querySelectorAll('.dot');
58    let currentIndex = 0;
59
60    function animateDots() {
61      dots.forEach((dot, index) => {
62        if (index === currentIndex) {
63          dot.classList.add('active');
64        } else {
65          dot.classList.remove('active');
66          dot.classList.add('inactive');
67        }
68      });
69
70      currentIndex = (currentIndex + 1) % dots.length;
71      setTimeout(animateDots, 1000);
72    }
73
74    animateDots();
75  </script>
76</body>
77</html>