model output
LLaMA 4 Scout

Wavy Loading Animations
A 0.62T 0.28
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Animation</title>
5    <style>
6        .triangle {
7            width: 0;
8            height: 0;
9            border-style: solid;
10            border-width: 0 5px 10px 5px;
11            border-color: transparent transparent #333 transparent;
12        }
13
14        .animate {
15            animation: move 2s infinite;
16        }
17
18        @keyframes move {
19            0% {
20                transform: translateX(0) rotate(0deg);
21            }
22            100% {
23                transform: translateX(100px) rotate(45deg);
24            }
25        }
26
27        .bar {
28            width: 5px;
29            height: 20px;
30            background-color: #333;
31            display: inline-block;
32            animation: bar-move 2s infinite;
33        }
34
35        @keyframes bar-move {
36            0% {
37                transform: translateY(0);
38            }
39            100% {
40                transform: translateY(-20px);
41            }
42        }
43    </style>
44</head>
45<body>
46    <div class="triangle animate" style="border-color: transparent transparent #333 transparent; margin-top: 50px; margin-left: 50px;"></div>
47    <div style="margin-top: 50px; margin-left: 50px;">
48        <div class="bar" style="animation-delay: 0.2s;"></div>
49        <div class="bar" style="animation-delay: 0.4s;"></div>
50        <div class="bar" style="animation-delay: 0.6s;"></div>
51        <div class="bar" style="animation-delay: 0.8s;"></div>
52        <div class="bar" style="animation-delay: 1s;"></div>
53    </div>
54</body>
55</html>