Neon Progress Bar

admin1234
Feb 09, 2026 7
Live Preview

Live Editor

<div class="progress-box">
  <div class="progress-text">Uploading Magic 🚀</div>
  <div class="progress-bar">
    <div class="progress-fill" id="bar"></div>
  </div>
  <div class="percent" id="percent">0%</div>
</div>
body{
  background:#0b0f1a;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:Arial, sans-serif;
}

/* Container */
.progress-box{
  width:380px;
  padding:30px;
  border-radius:18px;
  background:rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  box-shadow:0 0 30px rgba(0,255,255,0.15);
}

/* Label */
.progress-text{
  color:#fff;
  margin-bottom:12px;
  font-size:14px;
  letter-spacing:1px;
}

/* Bar */
.progress-bar{
  width:100%;
  height:22px;
  border-radius:30px;
  overflow:hidden;
  background:rgba(255,255,255,0.1);
  position:relative;
}

/* Fill */
.progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#00f2ff,#7cffcb,#00f2ff);
  background-size:200% 100%;
  animation: glow 3s linear infinite;
  position:relative;
}

/* Wave Effect */
.progress-fill::after{
  content:'';
  position:absolute;
  top:-8px;
  left:0;
  width:200%;
  height:200%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.4),transparent 60%);
  animation: wave 2.5s linear infinite;
}

/* Animations */
@keyframes glow{
  0%{background-position:0%}
  100%{background-position:200%}
}

@keyframes wave{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Percentage */
.percent{
  margin-top:12px;
  text-align:right;
  color:#7cffcb;
  font-weight:bold;
}
let progress = 0;
let bar = document.getElementById("bar");
let percent = document.getElementById("percent");

let interval = setInterval(()=>{
  progress++;
  bar.style.width = progress + "%";
  percent.innerText = progress + "%";

  if(progress >= 100){
    clearInterval(interval);
    percent.innerText = "Completed ✨";
  }
},40);
Categories

Neon Progress Bar

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
