model output
LLaMA 4 Scout

Animated Dot Loaders
A 0.41T 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        body {
9            background-color: #000;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .dot {
17            position: relative;
18            width: 10px;
19            height: 10px;
20            border-radius: 50%;
21            background-color: #fff;
22            animation: pulse 1.5s infinite;
23        }
24        .dot:nth-child(1) {
25            animation-delay: 0s;
26        }
27        .dot:nth-child(2) {
28            animation-delay: 0.5s;
29        }
30        .dot:nth-child(3) {
31            animation-delay: 1s;
32        }
33        .dot:nth-child(4) {
34            animation-delay: 1.5s;
35        }
36
37        @keyframes pulse {
38            0%, 100% {
39                opacity: 1;
40            }
41            50% {
42                opacity: 0.5;
43            }
44        }
45        .animate {
46            animation: move 5s infinite;
47        }
48
49        @keyframes move {
50            0% {
51                transform: translateX(0);
52            }
53            100% {
54                transform: translateX(40px);
55            }
56        }
57    </style>
58</head>
59<body>
60    <div id="loading">
61        <span class="dot"></span>
62        <span class="dot"></span>
63        <span class="dot"></span>
64        <span class="dot"></span>
65    </div>
66
67    <script>
68        // Get the loading element
69        const loadingElement = document.getElementById('loading');
70
71        // Function to animate the dots
72        function animateDots() {
73            // Create a new span element for each dot
74            for (let i = 0; i < 4; i++) {
75                const dot = document.createElement('span');
76                dot.classList.add('dot');
77                loadingElement.appendChild(dot);
78            }
79        }
80
81        // Function to remove dots
82        function removeDots() {
83            // Remove all child elements from the loading element
84            while (loadingElement.firstChild) {
85                loadingElement.removeChild(loadingElement.firstChild);
86            }
87        }
88
89        // Animate the dots
90        animateDots();
91
92        // Remove dots after 5 seconds
93        setTimeout(removeDots, 5000);
94
95        // Add and remove dots continuously
96        setInterval(() => {
97            removeDots();
98            animateDots();
99        }, 5000);
100    </script>
101</body>
102</html>