model output
Qwen3-VL-8B-Instruct

Loaders (WIP)
A 0.82T 0.21
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>Loading Animation</title>
7    <style>
8        body {
9            background-color: #e64a19;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            display: flex;
18            align-items: center;
19            justify-content: center;
20            width: 150px;
21            height: 30px;
22            background-color: #e64a19;
23            border-radius: 4px;
24            position: relative;
25            overflow: hidden;
26        }
27        .loader-text {
28            color: white;
29            font-size: 14px;
30            font-weight: bold;
31            position: absolute;
32            left: 0;
33            top: 0;
34            padding: 0 10px;
35            white-space: nowrap;
36        }
37        .progress {
38            width: 0%;
39            height: 100%;
40            background-color: white;
41            position: absolute;
42            left: 0;
43            top: 0;
44            transition: width 0.5s ease-in-out;
45        }
46        .loader-text::after {
47            content: "...";
48            animation: blink 1s infinite;
49        }
50        @keyframes blink {
51            0%, 100% { opacity: 1; }
52            50% { opacity: 0; }
53        }
54    </style>
55</head>
56<body>
57    <div class="loader">
58        <div class="progress"></div>
59        <div class="loader-text">LOADING</div>
60    </div>
61
62    <script>
63        const progress = document.querySelector('.progress');
64        const loaderText = document.querySelector('.loader-text');
65        const loader = document.querySelector('.loader');
66
67        function animateProgress() {
68            let width = 0;
69            const interval = setInterval(() => {
70                if (width >= 100) {
71                    clearInterval(interval);
72                    return;
73                }
74                width += 10;
75                progress.style.width = width + '%';
76                if (width === 100) {
77                    setTimeout(() => {
78                        progress.style.width = '0%';
79                        width = 0;
80                        animateProgress();
81                    }, 500);
82                }
83            }, 100);
84        }
85
86        animateProgress();
87    </script>
88</body>
89</html>