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>Glowing Loading Bar</title>
7<style>
8 :root{
9 --w: 240px;
10 --h: 32px;
11 --track: #666a72;
12 --bg-center: #050607;
13 --bg-edge: #2a2c31;
14 }
15
16 * { box-sizing: border-box; }
17 html, body {
18 margin: 0;
19 width: 100%;
20 height: 100%;
21 overflow: hidden;
22 background:
23 radial-gradient(circle at center,
24 #000 0%,
25 #050607 18%,
26 #111317 42%,
27 #1d2025 72%,
28 #2b2d32 100%);
29 }
30
31 body{
32 display:grid;
33 place-items:center;
34 font-family: system-ui, sans-serif;
35 }
36
37 .wrap{
38 position: relative;
39 width: var(--w);
40 height: var(--h);
41 }
42
43 .track{
44 position:absolute;
45 inset:0;
46 background: rgba(112,116,124,.78);
47 border-radius: 0;
48 }
49
50 .fill{
51 position:absolute;
52 left:0;
53 top:0;
54 height:100%;
55 width:0%;
56 border-radius: 0;
57 background: linear-gradient(90deg, #ff2bd6 0%, #b84cff 38%, #6f6cff 68%, #2ea8ff 100%);
58 box-shadow:
59 0 0 8px rgba(180, 76, 255, .85),
60 0 0 18px rgba(120, 90, 255, .55),
61 0 0 28px rgba(46, 168, 255, .28);
62 animation: load 2.8s linear infinite;
63 transform-origin: left center;
64 }
65
66 @keyframes load{
67 0%{
68 width:0%;
69 filter:hue-rotate(0deg);
70 box-shadow:
71 0 0 8px rgba(255, 43, 214, .9),
72 0 0 18px rgba(200, 60, 255, .55),
73 0 0 28px rgba(160, 70, 255, .25);
74 }
75 8%{
76 width:8%;
77 filter:hue-rotate(0deg);
78 }
79 20%{
80 width:28%;
81 filter:hue-rotate(8deg);
82 }
83 34%{
84 width:50%;
85 filter:hue-rotate(18deg);
86 }
87 48%{
88 width:68%;
89 filter:hue-rotate(38deg);
90 }
91 62%{
92 width:82%;
93 filter:hue-rotate(72deg);
94 box-shadow:
95 0 0 8px rgba(90, 120, 255, .9),
96 0 0 18px rgba(70, 140, 255, .55),
97 0 0 28px rgba(46, 168, 255, .3);
98 }
99 74%{
100 width:94%;
101 filter:hue-rotate(108deg);
102 box-shadow:
103 0 0 8px rgba(46, 168, 255, .95),
104 0 0 18px rgba(46, 168, 255, .6),
105 0 0 28px rgba(46, 168, 255, .32);
106 }
107 82%{
108 width:100%;
109 filter:hue-rotate(118deg);
110 box-shadow:
111 0 0 8px rgba(46, 168, 255, .95),
112 0 0 18px rgba(46, 168, 255, .6),
113 0 0 28px rgba(46, 168, 255, .32);
114 }
115 83%{
116 width:0%;
117 filter:hue-rotate(0deg);
118 box-shadow:
119 0 0 8px rgba(255, 43, 214, .9),
120 0 0 18px rgba(200, 60, 255, .55),
121 0 0 28px rgba(160, 70, 255, .25);
122 }
123 100%{
124 width:28%;
125 filter:hue-rotate(8deg);
126 box-shadow:
127 0 0 8px rgba(220, 60, 255, .9),
128 0 0 18px rgba(190, 70, 255, .55),
129 0 0 28px rgba(160, 70, 255, .25);
130 }
131 }
132
133 /* subtle vignette overlay for closer match */
134 body::after{
135 content:"";
136 position:fixed;
137 inset:0;
138 pointer-events:none;
139 background:
140 radial-gradient(circle at center,
141 rgba(0,0,0,0) 0 22%,
142 rgba(0,0,0,.12) 45%,
143 rgba(0,0,0,.22) 72%,
144 rgba(0,0,0,.34) 100%);
145 }
146</style>
147</head>
148<body>
149 <div class="wrap" aria-label="loading animation">
150 <div class="track"></div>
151 <div class="fill"></div>
152 </div>
153</body>
154</html>