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: 200px;
19 height: 10px;
20 background-color: #ccc;
21 border-radius: 10px;
22 overflow: hidden;
23 }
24 .fill {
25 position: absolute;
26 left: 0;
27 top: 0;
28 height: 100%;
29 background-color: #fff;
30 border-radius: 10px;
31 }
32 .glow {
33 position: absolute;
34 left: 0;
35 top: 0;
36 height: 100%;
37 background-color: #ff00ff;
38 border-radius: 10px;
39 animation: glow 2s linear infinite;
40 }
41 @keyframes glow {
42 0% {
43 left: 0;
44 width: 5%;
45 }
46 100% {
47 left: 100%;
48 width: 5%;
49 }
50 }
51 .animate-fill {
52 animation: fill 10s linear;
53 }
54 @keyframes fill {
55 0% {
56 width: 0%;
57 }
58 100% {
59 width: 100%;
60 }
61 }
62 .color-change {
63 animation: color-change 10s linear;
64 }
65 @keyframes color-change {
66 0% {
67 background-color: #ff00ff;
68 }
69 20% {
70 background-color: #ff00ff;
71 }
72 40% {
73 background-color: #00ffff;
74 }
75 60% {
76 background-color: #ffff00;
77 }
78 80% {
79 background-color: #00ff00;
80 }
81 100% {
82 background-color: #0000ff;
83 }
84 }
85 </style>
86</head>
87<body>
88 <div class="bar">
89 <div class="fill animate-fill color-change"></div>
90 </div>
91</body>
92</html>