LLaMA 4 Scout

Tiny Single Element Loading Animations
A 0.57T 0.10
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>Dot Animation</title>
7<style>
8  .dot-container {
9    position: relative;
10    width: 100vw;
11    height: 100vh;
12    display: flex;
13    justify-content: flex-start;
14    align-items: flex-start;
15    padding-top: 20px;
16    padding-left: 20px;
17  }
18  .dot {
19    width: 10px;
20    height: 10px;
21    border-radius: 50%;
22    position: relative;
23    animation: colorChange 4s infinite;
24  }
25  .dot:nth-child(1) {
26    animation-delay: 0s;
27  }
28  .dot:nth-child(2) {
29    animation-delay: 1s;
30  }
31  .dot:nth-child(3) {
32    animation-delay: 2s;
33  }
34  
35  @keyframes colorChange {
36    0% {
37      background-color: black;
38      transform: translateX(0);
39    }
40    33% {
41      background-color: gray;
42      transform: translateX(50vw);
43    }
44    66% {
45      background-color: black;
46      transform: translateX(50vw);
47    }
48    100% {
49      background-color: gray;
50      transform: translateX(0);
51    }
52  }
53</style>
54</head>
55<body>
56
57<div class="dot-container">
58  <div class="dot"></div>
59  <div class="dot"></div>
60  <div class="dot"></div>
61</div>
62
63</body>
64</html>