model output
LLaMA 4 Scout

Thinking about SVG-preloaders
A 0.70T 0.13
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: #000;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            position: relative;
18        }
19        .dot {
20            position: absolute;
21            width: 10px;
22            height: 10px;
23            border-radius: 50%;
24            opacity: 0;
25            animation: appear 2s linear infinite;
26        }
27        @keyframes appear {
28            0% {
29                opacity: 1;
30                transform: scale(1);
31            }
32            100% {
33                opacity: 1;
34                transform: scale(1);
35            }
36        }
37        .dot:nth-child(1) {
38            background-color: #ff69b4;
39            animation-delay: 0s;
40        }
41        .dot:nth-child(2) {
42            background-color: #ffa07a;
43            animation-delay: 0.2s;
44        }
45        .dot:nth-child(3) {
46            background-color: #ffff00;
47            animation-delay: 0.4s;
48        }
49        .dot:nth-child(4) {
50            background-color: #00ff00;
51            animation-delay: 0.6s;
52        }
53        .dot:nth-child(5) {
54            background-color: #0000ff;
55            animation-delay: 0.8s;
56        }
57        .dot:nth-child(6) {
58            background-color: #800080;
59            animation-delay: 1s;
60        }
61        .dot:nth-child(7) {
62            background-color: #808000;
63            animation-delay: 1.2s;
64        }
65        .dot:nth-child(8) {
66            background-color: #800080;
67            animation-delay: 1.4s;
68        }
69        .dot:nth-child(9) {
70            background-color: #808000;
71            animation-delay: 1.6s;
72        }
73        .dot:nth-child(10) {
74            background-color: #800080;
75            animation-delay: 1.8s;
76        }
77        @keyframes rotate {
78            0% {
79                transform: rotate(0deg);
80            }
81            100% {
82                transform: rotate(360deg);
83            }
84        }
85        .container {
86            position: relative;
87            width: 50px;
88            height: 50px;
89            animation: rotate 2s linear infinite;
90        }
91    </style>
92</head>
93<body>
94    <div class="container">
95        <div class="dot" style="top: 15px; left: 25px; transform-origin: 25px 25px;"></div>
96        <div class="dot" style="top: 5px; left: 25px; transform-origin: 25px 25px;"></div>
97        <div class="dot" style="top: 0px; left: 15px; transform-origin: 25px 25px;"></div>
98        <div class="dot" style="top: 0px; left: 5px; transform-origin: 25px 25px;"></div>
99        <div class="dot" style="top: 5px; left: 0px; transform-origin: 25px 25px;"></div>
100        <div class="dot" style="top: 15px; left: 0px; transform-origin: 25px 25px;"></div>
101        <div class="dot" style="top: 25px; left: 5px; transform-origin: 25px 25px;"></div>
102        <div class="dot" style="top: 25px; left: 15px; transform-origin: 25px 25px;"></div>
103        <div class="dot" style="top: 15px; left: 20px; transform-origin: 25px 25px;"></div>
104    </div>
105</body>
106</html>