model output
LLaMA 4 Scout

Spinners using Font Icons
A 0.68T 0.23
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: black;
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            background-color: white;
25            opacity: 0.5;
26        }
27        @keyframes rotate {
28            0% {
29                transform: rotate(0deg);
30            }
31            100% {
32                transform: rotate(360deg);
33            }
34        }
35        .loader {
36            animation: rotate 2s linear infinite;
37        }
38        .dot:nth-child(1) {
39            top: 0;
40            left: 50%;
41            transform: translateX(-50%);
42            animation: pulse 1.5s ease-out infinite;
43        }
44        .dot:nth-child(2) {
45            top: 20px;
46            right: 0;
47            animation: pulse 1.5s ease-out 0.2s infinite;
48        }
49        .dot:nth-child(3) {
50            bottom: 20px;
51            right: 0;
52            animation: pulse 1.5s ease-out 0.4s infinite;
53        }
54        .dot:nth-child(4) {
55            bottom: 0;
56            left: 50%;
57            transform: translateX(-50%);
58            animation: pulse 1.5s ease-out 0.6s infinite;
59        }
60        .dot:nth-child(5) {
61            bottom: 20px;
62            left: 0;
63            animation: pulse 1.5s ease-out 0.8s infinite;
64        }
65        .dot:nth-child(6) {
66            top: 20px;
67            left: 0;
68            animation: pulse 1.5s ease-out 1s infinite;
69        }
70        .dot:nth-child(7) {
71            top: 0;
72            right: 50%;
73            transform: translateX(50%);
74            animation: pulse 1.5s ease-out 1.2s infinite;
75        }
76        @keyframes pulse {
77            0% {
78                transform: scale(1);
79            }
80            50% {
81                transform: scale(1.2);
82            }
83            100% {
84                transform: scale(1);
85            }
86        }
87    </style>
88</head>
89<body>
90    <div class="loader">
91        <div class="dot"></div>
92        <div class="dot"></div>
93        <div class="dot"></div>
94        <div class="dot"></div>
95        <div class="dot"></div>
96        <div class="dot"></div>
97        <div class="dot"></div>
98    </div>
99</body>
100</html>