Wave Flow Progress Bar

aartigoyal

Jan 29, 2026 5

Live Preview

Live Editor

<div class="progress-wrap">
  <div class="label">
    <span>Uploading assets</span>
    <span>70%</span>
  </div>
  <div class="progress"></div>
</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#0b0b0b;
  font-family:Arial, sans-serif;
}

.progress-wrap{
  width:320px;
}

.label{
  color:#aaa;
  font-size:14px;
  margin-bottom:8px;
  display:flex;
  justify-content:space-between;
}

.progress{
  position:relative;
  height:18px;
  border-radius:50px;
  background:#111;
  overflow:hidden;
}

.progress::before{
  content:"";
  position:absolute;
  inset:0;
  width:70%; /* change progress */
  background:linear-gradient(
    120deg,
    #ff6a00,
    #ff0066,
    #6a5cff,
    #00e5ff
  );
  animation:flow 3s linear infinite;
}

.progress::after{
  content:"";
  position:absolute;
  inset:0;
  width:70%;
  background:repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.15) 0,
    rgba(255,255,255,.15) 10px,
    transparent 10px,
    transparent 20px
  );
  animation:wave 1.6s linear infinite;
}

@keyframes flow{
  0%{background-position:0%}
  100%{background-position:200%}
}

@keyframes wave{
  0%{background-position:0 0}
  100%{background-position:40px 0}
}

Categories

Wave Flow Progress Bar

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet