model output
LLaMA 4 Scout

flat loading animate
A 0.56T 0.18
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-animation {
9            position: relative;
10            width: 100px;
11            height: 100px;
12        }
13        .dot {
14            position: absolute;
15            border-radius: 50%;
16            opacity: 0;
17            animation: appear 2s linear infinite;
18        }
19        .dot:nth-child(1) {
20            top: 50%;
21            left: 50%;
22            transform: translate(-50%, -50%);
23            background-color: #333;
24            width: 10px;
25            height: 10px;
26            animation-delay: 0s;
27        }
28        .dot:nth-child(2) {
29            top: 50%;
30            left: 50%;
31            transform: translate(-50%, -50%) rotate(90deg) translateX(40px);
32            background-color: #06C;
33            width: 8px;
34            height: 8px;
35            animation-delay: 0.2s;
36        }
37        .dot:nth-child(3) {
38            top: 50%;
39            left: 50%;
40            transform: translate(-50%, -50%) rotate(180deg) translateX(40px);
41            background-color: #FF69B4;
42            width: 6px;
43            height: 6px;
44            animation-delay: 0.4s;
45        }
46        .dot:nth-child(4) {
47            top: 50%;
48            left: 50%;
49            transform: translate(-50%, -50%) rotate(270deg) translateX(40px);
50            background-color: #FFA07A;
51            width: 4px;
52            height: 4px;
53            animation-delay: 0.6s;
54        }
55        .dot:nth-child(5) {
56            top: calc(50% - 20px);
57            left: calc(50% - 20px);
58            background-color: #333;
59            width: 10px;
60            height: 10px;
61            animation-delay: 0.8s;
62        }
63        .dot:nth-child(6) {
64            top: calc(50% - 20px);
65            left: calc(50% - 20px);
66            transform: translateX(20px);
67            background-color: #06C;
68            width: 8px;
69            height: 8px;
70            animation-delay: 1s;
71        }
72        .dot:nth-child(7) {
73            top: calc(50% - 20px);
74            left: calc(50% + 20px);
75            background-color: #FF69B4;
76            width: 6px;
77            height: 6px;
78            animation-delay: 1.2s;
79        }
80        .dot:nth-child(8) {
81            top: calc(50% + 20px);
82            left: calc(50% - 20px);
83            transform: translateX(20px);
84            background-color: #FFA07A;
85            width: 4px;
86            height: 4px;
87            animation-delay: 1.4s;
88        }
89        @keyframes appear {
90            0% {
91                opacity: 1;
92                transform: scale(1);
93            }
94            100% {
95                opacity: 0;
96                transform: scale(4);
97            }
98        }
99    </style>
100</head>
101<body>
102    <div class="loading-animation">
103        <div class="dot"></div>
104        <div class="dot"></div>
105        <div class="dot"></div>
106        <div class="dot"></div>
107        <div class="dot"></div>
108        <div class="dot"></div>
109        <div class="dot"></div>
110        <div class="dot"></div>
111    </div>
112</body>
113</html>