model output
LLaMA 4 Scout

Wavy Loading Animations
A 0.39T 0.24
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        .bars {
9            position: relative;
10            top: 50px;
11        }
12        .bar {
13            position: absolute;
14            left: 0;
15            bottom: 0;
16            width: 2px;
17            background-color: #ccc;
18        }
19        @keyframes grow {
20            0% {
21                height: 10px;
22                left: 0;
23            }
24            100% {
25                height: 50px;
26                left: 50px;
27            }
28        }
29        .animate {
30            animation: grow 2s ease-out;
31        }
32    </style>
33</head>
34<body>
35    <div class="bars">
36        <div class="bar" style="left: 0px; background-color: #333;"></div>
37        <div class="bar" style="left: 10px; background-color: #444;"></div>
38        <div class="bar" style="left: 20px; background-color: #555;"></div>
39        <div class="bar" style="left: 30px; background-color: #666;"></div>
40        <div class="bar" style="left: 40px; background-color: #777;"></div>
41    </div>
42
43    <script>
44        const bars = document.querySelectorAll('.bar');
45        let i = 0;
46        function animate() {
47            if (i < bars.length) {
48                bars[i].classList.add('animate');
49                i++;
50                setTimeout(animate, 200); // adjust timing as needed
51            }
52        }
53        animate();
54    </script>
55</body>
56</html>