model output
Qwen3-VL-8B-Instruct

Animated Dot Loaders
A 0.86T 0.24
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    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    background: linear-gradient(135deg, #1a0033, #2d004b);
15    overflow: hidden;
16  }
17  .loader {
18    display: flex;
19    justify-content: center;
20    align-items: center;
21    gap: 5px;
22    width: 80px;
23    height: 20px;
24  }
25  .dot {
26    width: 10px;
27    height: 10px;
28    border-radius: 50%;
29    background: rgba(255, 255, 255, 0.7);
30    animation: pulse 1.5s infinite ease-in-out;
31    transform: scale(0.8);
32  }
33  .dot:nth-child(1) {
34    animation-delay: 0s;
35  }
36  .dot:nth-child(2) {
37    animation-delay: 0.2s;
38  }
39  .dot:nth-child(3) {
40    animation-delay: 0.4s;
41  }
42  .dot:nth-child(4) {
43    animation-delay: 0.6s;
44  }
45  .dot:nth-child(5) {
46    animation-delay: 0.8s;
47  }
48  @keyframes pulse {
49    0%, 100% {
50      transform: scale(0.8);
51      opacity: 0.7;
52    }
53    50% {
54      transform: scale(1.2);
55      opacity: 1;
56    }
57  }
58</style>
59</head>
60<body>
61  <div class="loader">
62    <div class="dot"></div>
63    <div class="dot"></div>
64    <div class="dot"></div>
65    <div class="dot"></div>
66    <div class="dot"></div>
67  </div>
68</body>
69</html>