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>Loading Animation</title>
7 <style>
8 body {
9 background-color: #000;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .bar {
17 position: relative;
18 width: 100px;
19 height: 20px;
20 background-color: #333;
21 display: flex;
22 }
23 .bar div {
24 width: 20px;
25 height: 20px;
26 background-color: #333;
27 transition: background-color 0.5s ease-in-out;
28 }
29 .animate div:nth-child(1) {
30 animation: color1 10s linear infinite;
31 }
32 .animate div:nth-child(2) {
33 animation: color2 10s linear infinite;
34 }
35 .animate div:nth-child(3) {
36 animation: color3 10s linear infinite;
37 }
38 @keyframes color1 {
39 0% { background-color: #333; }
40 20% { background-color: #FF69B4; }
41 100% { background-color: #333; }
42 }
43 @keyframes color2 {
44 0% { background-color: #333; }
45 30% { background-color: #333; }
46 50% { background-color: #7A288A; }
47 100% { background-color: #333; }
48 }
49 @keyframes color3 {
50 0% { background-color: #333; }
51 60% { background-color: #333; }
52 80% { background-color: #00BFFF; }
53 100% { background-color: #333; }
54 }
55 </style>
56</head>
57<body>
58 <div class="bar animate">
59 <div></div>
60 <div></div>
61 <div></div>
62 </div>
63</body>
64</html>