model output
LLaMA 4 Scout

Animated Dot Loaders
A 0.68T 0.16
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        .dots {
17            position: relative;
18        }
19        .dot {
20            position: absolute;
21            width: 10px;
22            height: 10px;
23            border-radius: 50%;
24            background-color: #ccc;
25            transform: scale(0.5);
26            transition: all 0.5s ease-in-out;
27        }
28        .dot.active {
29            transform: scale(1);
30        }
31    </style>
32</head>
33<body>
34    <div class="dots">
35        <span class="dot" style="left: 0px; animation: dot1 5s infinite;"></span>
36        <span class="dot" style="left: 20px; animation: dot2 5s infinite;"></span>
37        <span class="dot" style="left: 40px; animation: dot3 5s infinite;"></span>
38        <span class="dot" style="left: 60px; animation: dot4 5s infinite;"></span>
39        <span class="dot" style="left: 80px; animation: dot5 5s infinite;"></span>
40    </div>
41
42    <script>
43        // No JavaScript needed for this animation
44    </script>
45
46    <style>
47        @keyframes dot1 {
48            0%, 20% {
49                transform: scale(1);
50            }
51            40%, 60%, 80%, 100% {
52                transform: scale(0.5);
53            }
54        }
55        @keyframes dot2 {
56            0%, 10%, 30% {
57                transform: scale(0.5);
58            }
59            50% {
60                transform: scale(1);
61            }
62            70%, 90% {
63                transform: scale(0.5);
64            }
65            100% {
66                transform: scale(0.5);
67            }
68        }
69        @keyframes dot3 {
70            0%, 40% {
71                transform: scale(0.5);
72            }
73            60% {
74                transform: scale(1);
75            }
76            80%, 100% {
77                transform: scale(0.5);
78            }
79        }
80        @keyframes dot4 {
81            0%, 60% {
82                transform: scale(0.5);
83            }
84            80% {
85                transform: scale(1);
86            }
87            90%, 100% {
88                transform: scale(0.5);
89            }
90        }
91        @keyframes dot5 {
92            0%, 80% {
93                transform: scale(0.5);
94            }
95            100% {
96                transform: scale(1);
97            }
98        }
99    </style>
100</body>
101</html>