model output
LLaMA 4 Scout

Wavy Loading Animations
A 0.44T 0.26
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        .hourglass {
9            position: relative;
10            width: 50px;
11            height: 50px;
12            transform-origin: center;
13        }
14        .hourglass::before, .hourglass::after {
15            content: "";
16            position: absolute;
17            width: 25px;
18            height: 50px;
19            background-color: black;
20            border-radius: 25px;
21            transform-origin: bottom center;
22        }
23        .hourglass::before {
24            left: 0;
25            transform: rotate(0deg);
26        }
27        .hourglass::after {
28            right: 0;
29            transform: rotate(180deg);
30        }
31        @keyframes spin {
32            0% {
33                transform: rotate(0deg);
34            }
35            100% {
36                transform: rotate(360deg);
37            }
38        }
39        .animation {
40            animation: spin 2s linear infinite;
41        }
42    </style>
43</head>
44<body>
45    <div class="hourglass" id="hourglass"></div>
46    <script>
47        // Get the hourglass element
48        const hourglass = document.getElementById('hourglass');
49
50        // Function to animate the hourglass
51        function animateHourglass() {
52            // Add animation class
53            hourglass.classList.add('animation');
54
55            // Remove animation class after 2 seconds
56            setTimeout(() => {
57                hourglass.classList.remove('animation');
58            }, 2000);
59        }
60
61        // Call the animateHourglass function
62        animateHourglass();
63    </script>
64</body>
65</html>