model output
LLaMA 4 Scout

Wavy Loading Animations
A 0.43T 0.11
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            background-color: #ffffff;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16        }
17        .animate {
18            position: relative;
19            width: 20px;
20            height: 20px;
21            background-color: #000000;
22            border-radius: 50%;
23            transform: rotate(0deg);
24            animation: rotate 3s linear infinite;
25        }
26        @keyframes rotate {
27            0% {
28                transform: rotate(0deg);
29            }
30            50% {
31                transform: rotate(180deg);
32            }
33            100% {
34                transform: rotate(360deg);
35            }
36        }
37        .fade {
38            animation: fade 3s linear infinite;
39        }
40        @keyframes fade {
41            0% {
42                opacity: 1;
43            }
44            50% {
45                opacity: 0;
46            }
47            100% {
48                opacity: 1;
49            }
50        }
51    </style>
52</head>
53<body>
54    <div class="animation-container">
55        <div class="animate" style="animation-delay: 0s;"></div>
56        <div class="animate" style="animation-delay: 0.5s;"></div>
57        <div class="animate" style="animation-delay: 1s;"></div>
58        <div class="animate" style="animation-delay: 1.5s;"></div>
59        <div class="animate" style="animation-delay: 2s;"></div>
60        <div class="animate" style="animation-delay: 2.5s;"></div>
61    </div>
62    <script>
63        // No JavaScript needed for this animation
64    </script>
65</body>
66</html>