LLaMA 4 Scout

Tiny Single Element Loading Animations
A 0.55T 0.14
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: 10px;
11            left: 10px;
12            font-size: 24px;
13            transition: transform 0.5s ease-in-out;
14        }
15        .add-icon {
16            color: #00A0FF;
17        }
18        .remove-icon {
19            color: #FF4949;
20        }
21        .animate {
22            animation: icon-change 5s infinite;
23        }
24        @keyframes icon-change {
25            0% {
26                transform: scale(1);
27            }
28            20% {
29                transform: scale(1.2);
30            }
31            40% {
32                transform: scale(1);
33            }
34            60% {
35                transform: scale(0.8);
36            }
37            80% {
38                transform: scale(1);
39            }
40            100% {
41                transform: scale(1);
42            }
43        }
44    </style>
45</head>
46<body>
47    <div class="icon add-icon">&#43;</div>
48    <script>
49        let icon = document.querySelector('.icon');
50        let isAddIcon = true;
51        let step = 0;
52        setInterval(() => {
53            if (step === 8) {
54                isAddIcon = !isAddIcon;
55                step = 0;
56            }
57            if (isAddIcon) {
58                icon.innerHTML = '&#43;';
59                icon.classList.remove('remove-icon');
60                icon.classList.add('add-icon');
61            } else {
62                icon.innerHTML = '&#215;';
63                icon.classList.remove('add-icon');
64                icon.classList.add('remove-icon');
65            }
66            step++;
67        }, 625);
68    </script>
69</body>
70</html>