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>Neon Scan Bar</title>
7<style>
8 :root{
9 --bg-edge:#2b2d31;
10 --bg-mid:#111317;
11 --bg-core:#050607;
12 --track:#5a5d63;
13 --pink:#ff1fd1;
14 --violet:#8b5cff;
15 --blue:#19b8ff;
16 --w:240px;
17 --h:48px;
18 --dur:2.2s;
19 }
20
21 *{box-sizing:border-box}
22 html,body{
23 margin:0;
24 width:100%;
25 height:100%;
26 overflow:hidden;
27 background:
28 radial-gradient(circle at center,
29 var(--bg-core) 0%,
30 #07090b 18%,
31 #101317 42%,
32 #1b1e23 72%,
33 var(--bg-edge) 100%);
34 }
35
36 body{
37 display:grid;
38 place-items:center;
39 font-family:system-ui,sans-serif;
40 }
41
42 .wrap{
43 position:relative;
44 width:var(--w);
45 height:var(--h);
46 filter: blur(.15px);
47 }
48
49 .track{
50 position:absolute;
51 inset:0;
52 background:#55585e;
53 opacity:.92;
54 }
55
56 .glow{
57 position:absolute;
58 left:0;
59 width:100%;
60 height:8px;
61 border-radius:6px;
62 transform-origin:left center;
63 mix-blend-mode:screen;
64 filter: blur(4px);
65 opacity:.95;
66 }
67
68 .line{
69 position:absolute;
70 left:0;
71 height:5px;
72 border-radius:4px;
73 transform-origin:left center;
74 background:linear-gradient(90deg,var(--pink) 0%, var(--violet) 52%, var(--blue) 100%);
75 box-shadow:
76 0 0 8px rgba(255,31,209,.55),
77 0 0 14px rgba(139,92,255,.45),
78 0 0 18px rgba(25,184,255,.35);
79 }
80
81 .l1,.g1{ top:1px; }
82 .l2,.g2{ top:10px; }
83 .l3,.g3{ top:19px; }
84 .l4,.g4{ top:28px; }
85 .l5,.g5{ top:37px; }
86
87 .g1{ background:linear-gradient(90deg,rgba(255,31,209,.55),rgba(139,92,255,.45),rgba(25,184,255,.55)); }
88 .g2{ background:linear-gradient(90deg,rgba(255,31,209,.45),rgba(139,92,255,.42),rgba(25,184,255,.48)); }
89 .g3{ background:linear-gradient(90deg,rgba(255,31,209,.42),rgba(139,92,255,.38),rgba(25,184,255,.42)); }
90 .g4{ background:linear-gradient(90deg,rgba(255,31,209,.40),rgba(139,92,255,.34),rgba(25,184,255,.38)); }
91 .g5{ background:linear-gradient(90deg,rgba(255,31,209,.38),rgba(139,92,255,.30),rgba(25,184,255,.34)); }
92
93 .l1,.g1{ animation:scan1 var(--dur) cubic-bezier(.42,0,.2,1) infinite; }
94 .l2,.g2{ animation:scan2 var(--dur) cubic-bezier(.42,0,.2,1) infinite; }
95 .l3,.g3{ animation:scan3 var(--dur) cubic-bezier(.42,0,.2,1) infinite; }
96 .l4,.g4{ animation:scan4 var(--dur) cubic-bezier(.42,0,.2,1) infinite; }
97 .l5,.g5{ animation:scan5 var(--dur) cubic-bezier(.42,0,.2,1) infinite; }
98
99 @keyframes scan1{
100 0%,6% { width:0; opacity:0; }
101 10% { width:36px; opacity:1; }
102 28% { width:198px; opacity:1; }
103 40% { width:238px; opacity:1; }
104 52% { width:210px; opacity:1; }
105 66% { width:126px; opacity:.95; }
106 82% { width:84px; opacity:.9; }
107 100% { width:0; opacity:0; }
108 }
109 @keyframes scan2{
110 0%,8% { width:0; opacity:0; }
111 13% { width:28px; opacity:1; }
112 30% { width:158px; opacity:1; }
113 42% { width:198px; opacity:1; }
114 54% { width:168px; opacity:1; }
115 68% { width:96px; opacity:.95; }
116 84% { width:54px; opacity:.85; }
117 100% { width:0; opacity:0; }
118 }
119 @keyframes scan3{
120 0%,10% { width:0; opacity:0; }
121 16% { width:44px; opacity:1; }
122 34% { width:118px; opacity:1; }
123 46% { width:158px; opacity:1; }
124 58% { width:126px; opacity:1; }
125 72% { width:74px; opacity:.92; }
126 86% { width:34px; opacity:.8; }
127 100% { width:0; opacity:0; }
128 }
129 @keyframes scan4{
130 0%,12% { width:0; opacity:0; }
131 18% { width:36px; opacity:1; }
132 36% { width:78px; opacity:1; }
133 48% { width:118px; opacity:1; }
134 60% { width:96px; opacity:.98; }
135 74% { width:54px; opacity:.9; }
136 88% { width:18px; opacity:.75; }
137 100% { width:0; opacity:0; }
138 }
139 @keyframes scan5{
140 0%,14% { width:0; opacity:0; }
141 20% { width:28px; opacity:1; }
142 38% { width:36px; opacity:1; }
143 50% { width:78px; opacity:1; }
144 62% { width:54px; opacity:.95; }
145 76% { width:24px; opacity:.82; }
146 90% { width:8px; opacity:.55; }
147 100% { width:0; opacity:0; }
148 }
149
150 /* subtle ambient bloom around the whole bar */
151 .wrap::before{
152 content:"";
153 position:absolute;
154 inset:-18px -22px;
155 background:radial-gradient(circle at center, rgba(0,0,0,.55), rgba(0,0,0,0) 65%);
156 pointer-events:none;
157 }
158</style>
159</head>
160<body>
161 <div class="wrap">
162 <div class="track"></div>
163
164 <div class="glow g1"></div><div class="line l1"></div>
165 <div class="glow g2"></div><div class="line l2"></div>
166 <div class="glow g3"></div><div class="line l3"></div>
167 <div class="glow g4"></div><div class="line l4"></div>
168 <div class="glow g5"></div><div class="line l5"></div>
169 </div>
170
171<script>
172 // Keep the bar proportionally similar to the reference across screen sizes.
173 const root = document.documentElement;
174 function resizeBar(){
175 const s = Math.min(innerWidth / 1024, innerHeight / 768);
176 root.style.setProperty('--w', `${Math.round(240 * s)}px`);
177 root.style.setProperty('--h', `${Math.round(48 * s)}px`);
178 }
179 addEventListener('resize', resizeBar, {passive:true});
180 resizeBar();
181</script>
182</body>
183</html>