model output
LLaMA 4 Scout

Wavy Loading Animations
A 0.55T 0.23
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        .icon {
9            position: absolute;
10            top: 50%;
11            left: 50%;
12            transform: translate(-50%, -50%);
13            width: 20px;
14            height: 20px;
15            background-color: #333;
16            border-radius: 50%;
17            animation: move 2s infinite;
18        }
19
20        @keyframes move {
21            0% {
22                transform: translate(-50%, -50%) translateX(0);
23            }
24            100% {
25                transform: translate(-50%, -50%) translateX(200px);
26            }
27        }
28
29        .sound-wave {
30            position: absolute;
31            top: 50%;
32            left: 50%;
33            transform: translate(-50%, -50%);
34            width: 100px;
35            height: 20px;
36            background-image: linear-gradient(to right, #333 0%, #333 20%, #fff 20%, #fff 40%, #333 40%, #333 60%, #fff 60%, #fff 80%, #333 80%, #333 100%);
37            background-size: 200% 100%;
38            animation: sound-wave 2s infinite;
39        }
40
41        @keyframes sound-wave {
42            0% {
43                background-position: 0% 0%;
44            }
45            100% {
46                background-position: 100% 0%;
47            }
48        }
49
50        .triangle {
51            position: absolute;
52            top: 50%;
53            left: 50%;
54            transform: translate(-50%, -50%) rotate(0deg);
55            width: 0;
56            height: 0;
57            border-style: solid;
58            border-width: 0 10px 20px 10px;
59            border-color: transparent transparent #333 transparent;
60            animation: rotate 2s infinite;
61        }
62
63        @keyframes rotate {
64            0% {
65                transform: translate(-50%, -50%) rotate(0deg);
66            }
67            100% {
68                transform: translate(-50%, -50%) rotate(360deg);
69            }
70        }
71    </style>
72</head>
73<body>
74    <div class="icon"></div>
75    <div class="sound-wave" style="animation-delay: 0.5s;"></div>
76    <div class="triangle" style="animation-delay: 1s;"></div>
77</body>
78</html>