model output
LLaMA 4 Scout

flat loading animate
A 0.82T 0.32
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>Animation</title>
7    <style>
8        .ball {
9            position: absolute;
10            top: 50%;
11            left: 50%;
12            transform: translate(-50%, -50%);
13            width: 100px;
14            height: 100px;
15            border-radius: 50%;
16            background-image: linear-gradient(to right, #008000 0%, #008000 50%, #ffa07a 50%, #ffa07a 100%);
17        }
18        .animate {
19            animation: rotate 4s linear infinite;
20        }
21        @keyframes rotate {
22            0% {
23                transform: translate(-50%, -50%) rotate(0deg);
24                background-image: linear-gradient(to right, #008000 0%, #008000 50%, #ffa07a 50%, #ffa07a 100%);
25            }
26            25% {
27                transform: translate(-50%, -50%) rotate(90deg);
28                background-image: linear-gradient(to right, #008000 0%, #008000 50%, #ffa07a 50%, #ffa07a 100%);
29            }
30            50% {
31                transform: translate(-50%, -50%) rotate(180deg);
32                background-image: linear-gradient(to right, #ffa07a 0%, #ffa07a 50%, #008000 50%, #008000 100%);
33            }
34            75% {
35                transform: translate(-50%, -50%) rotate(270deg);
36                background-image: linear-gradient(to right, #ffa07a 0%, #ffa07a 50%, #008000 50%, #008000 100%);
37            }
38            100% {
39                transform: translate(-50%, -50%) rotate(360deg);
40                background-image: linear-gradient(to right, #008000 0%, #008000 50%, #ffa07a 50%, #ffa07a 100%);
41            }
42        }
43    </style>
44</head>
45<body>
46    <div class="ball animate"></div>
47</body>
48</html>