model output
LLaMA 4 Scout

Wavy Loading Animations
A 0.58T 0.27
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        body {
9            background-color: #fff;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .circle {
17            position: relative;
18        }
19        .circle::before {
20            content: "";
21            position: absolute;
22            top: 50%;
23            left: 50%;
24            transform: translate(-50%, -50%);
25            width: 20px;
26            height: 20px;
27            border-radius: 50%;
28            background-color: #000;
29            opacity: 0;
30            animation: appear 0.5s forwards;
31        }
32        .circle::after {
33            content: "";
34            position: absolute;
35            top: 50%;
36            left: 50%;
37            transform: translate(-50%, -50%);
38            width: 40px;
39            height: 40px;
40            border-radius: 50%;
41            border: 1px solid #000;
42            opacity: 0;
43            animation: appear 0.5s 0.3s forwards;
44        }
45        @keyframes appear {
46            0% {
47                opacity: 1;
48                transform: translate(-50%, -50%) scale(0);
49            }
50            100% {
51                opacity: 0;
52                transform: translate(-50%, -50%) scale(5);
53            }
54        }
55    </style>
56</head>
57<body>
58    <div class="circle"></div>
59    <script>
60        // No JavaScript needed for this animation
61    </script>
62</body>
63</html>