model output
LLaMA 4 Scout

Wavy Loading Animations
A 0.48T 0.29
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            margin: 0;
11            padding: 0;
12            overflow: hidden;
13        }
14        .bar {
15            position: absolute;
16            top: 50%;
17            left: 50%;
18            transform: translate(-50%, -50%);
19            width: 50px;
20            height: 10px;
21            background: #000;
22            animation: move 2s infinite;
23        }
24        @keyframes move {
25            0% {
26                transform: translate(-50%, -50%) rotate(0deg);
27            }
28            100% {
29                transform: translate(-50%, -50%) rotate(360deg);
30            }
31        }
32        .bar-stripes {
33            position: absolute;
34            top: 50%;
35            left: 50%;
36            transform: translate(-50%, -50%) rotate(0deg);
37            width: 50px;
38            height: 10px;
39            background-image: linear-gradient(to right, #fff 0%, #fff 50%, #000 50%, #000 100%);
40            background-size: 20px 10px;
41            animation: move-stripes 2s infinite linear;
42        }
43        @keyframes move-stripes {
44            0% {
45                transform: translate(-50%, -50%) rotate(0deg);
46            }
47            100% {
48                transform: translate(-50%, -50%) rotate(360deg);
49            }
50        }
51        .fade-in {
52            animation: fadeIn 2s;
53        }
54        @keyframes fadeIn {
55            from { opacity: 0; }
56            to { opacity: 1; }
57        }
58    </style>
59</head>
60<body>
61    <div class="bar-stripes" style="animation-delay: 0s;"></div>
62    <script>
63        // No JavaScript needed for this animation
64    </script>
65</body>
66</html>