model output
LLaMA 4 Scout

flat loading animate
A 0.47T 0.34
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        .animation-container {
9            position: relative;
10            width: 100vw;
11            height: 100vh;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            background-color: #fff;
16        }
17        .dot {
18            position: absolute;
19            width: 20px;
20            height: 20px;
21            border-radius: 50%;
22            background-color: #FFA07A;
23            animation: scale-out 1s ease-out forwards;
24        }
25        .dot-color-change {
26            position: absolute;
27            width: 20px;
28            height: 20px;
29            border-radius: 50%;
30            background-color: #008000;
31            animation: color-change 1s ease-out forwards;
32        }
33        .semi-circle-1 {
34            position: absolute;
35            width: 20px;
36            height: 20px;
37            border-radius: 50%;
38            background-color: #FFA07A;
39            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
40            animation: semi-circle-1-animation 1s ease-out forwards;
41        }
42        .semi-circle-2 {
43            position: absolute;
44            width: 20px;
45            height: 20px;
46            border-radius: 50%;
47            background-color: #008000;
48            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
49            animation: semi-circle-2-animation 1s ease-out forwards;
50        }
51        @keyframes scale-out {
52            0% {
53                transform: scale(1);
54                background-color: #FFA07A;
55            }
56            100% {
57                transform: scale(10);
58                opacity: 0;
59            }
60        }
61        @keyframes color-change {
62            0% {
63                background-color: #FFA07A;
64            }
65            50% {
66                background-color: #008000;
67            }
68            100% {
69                background-color: #1A1D23;
70            }
71        }
72        @keyframes semi-circle-1-animation {
73            0% {
74                clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
75                background-color: #FFA07A;
76            }
77            50% {
78                clip-path: polygon(50% 0%, 100% 50%, 0% 100%);
79            }
80            100% {
81                clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
82                opacity: 0;
83            }
84        }
85        @keyframes semi-circle-2-animation {
86            0% {
87                clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
88                background-color: #008000;
89            }
90            50% {
91                clip-path: polygon(50% 0%, 100% 50%, 0% 100%);
92            }
93            100% {
94                clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
95                opacity: 0;
96            }
97        }
98    </style>
99</head>
100<body>
101    <div class="animation-container">
102        <div class="dot"></div>
103        <div class="semi-circle-1"></div>
104        <div class="semi-circle-2"></div>
105        <div class="dot-color-change"></div>
106    </div>
107</body>
108</html>