model output
LLaMA 4 Scout

Thinking about SVG-preloaders
A 0.19T 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>Loading Animation</title>
7    <style>
8        .loading {
9            position: absolute;
10            top: 50%;
11            left: 50%;
12            transform: translate(-50%, -50%);
13        }
14        .dot {
15            position: relative;
16            width: 20px;
17            height: 20px;
18            border-radius: 50%;
19            background-color: #3498db;
20            animation: fadeInOut 2s infinite;
21        }
22        .dot:nth-child(1) {
23            animation-delay: 0s;
24        }
25        .dot:nth-child(2) {
26            animation-delay: 0.2s;
27        }
28        .dot:nth-child(3) {
29            animation-delay: 0.4s;
30        }
31        .dot:nth-child(4) {
32            animation-delay: 0.6s;
33        }
34        .dot:nth-child(5) {
35            animation-delay: 0.8s;
36        }
37        .dot:nth-child(6) {
38            animation-delay: 1s;
39        }
40        .dot:nth-child(7) {
41            animation-delay: 1.2s;
42        }
43        .dot:nth-child(8) {
44            animation-delay: 1.4s;
45        }
46
47        @keyframes fadeInOut {
48            0% {
49                opacity: 1;
50                transform: scale(1);
51            }
52            50% {
53                opacity: 0.5;
54                transform: scale(0.5);
55            }
56            100% {
57                opacity: 1;
58                transform: scale(1);
59            }
60        }
61        .loader {
62            position: relative;
63            width: 100px;
64            height: 20px;
65        }
66    </style>
67</head>
68<body>
69    <div class="loading">
70        <div class="loader">
71            <span class="dot" style="top: 0; left: 0; animation-delay: 0s;"></span>
72            <span class="dot" style="top: 0; left: 20px; animation-delay: 0.2s;"></span>
73            <span class="dot" style="top: 0; left: 40px; animation-delay: 0.4s;"></span>
74            <span class="dot" style="top: 0; left: 60px; animation-delay: 0.6s;"></span>
75            <span class="dot" style="top: 0; left: 80px; animation-delay: 0.8s;"></span>
76            <span class="dot" style="top: 0; left: 100px; animation-delay: 1s;"></span>
77            <span class="dot" style="top: 0; left: 120px; animation-delay: 1.2s;"></span>
78            <span class="dot" style="top: 0; left: 140px; animation-delay: 1.4s;"></span>
79        </div>
80    </div>
81</body>
82</html>