LLaMA 4 Scout

CirclePath 1 v4 Loading Animation
A 0.61T 0.09
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        body {
9            background-color: black;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .dot {
17            position: relative;
18            width: 20px;
19            height: 20px;
20            border-radius: 50%;
21            background-color: grey;
22            animation: appear 2s;
23        }
24        @keyframes appear {
25            0% {
26                opacity: 1;
27                transform: scale(1);
28            }
29            100% {
30                opacity: 1;
31                transform: scale(1);
32            }
33        }
34        .dot:nth-child(1) {
35            animation-delay: 0s;
36            background-color: #808080;
37        }
38        .dot:nth-child(2) {
39            animation-delay: 0.2s;
40            background-color: #C0C0C0;
41        }
42        .dot:nth-child(3) {
43            animation-delay: 0.4s;
44            background-color: #808080;
45        }
46        .dot:nth-child(4) {
47            animation-delay: 0.6s;
48            background-color: #C0C0C0;
49        }
50        .dot:nth-child(5) {
51            animation-delay: 0.8s;
52            background-color: #808080;
53        }
54        .dot:nth-child(6) {
55            animation-delay: 1s;
56            background-color: #C0C0C0;
57        }
58        .dot:nth-child(7) {
59            animation-delay: 1.2s;
60            background-color: #808080;
61        }
62    </style>
63</head>
64<body>
65    <div class="dot"></div>
66    <div class="dot"></div>
67    <div class="dot"></div>
68    <div class="dot"></div>
69    <div class="dot"></div>
70    <div class="dot"></div>
71    <div class="dot"></div>
72    <script>
73        // No JavaScript needed for this animation
74    </script>
75</body>
76</html>