Create a dynamic progress bar with customizable percentage using HTML, CSS, and JavaScript.

by Andrew Holloway

HTML

<div class="outer" style="--progress: .1">
  <div class="inner"></div>
</div>

<div class="outer" style="--progress: .5">
  <div class="inner"></div>
</div>

<div class="outer" style="--progress: 1.0">
  <div class="inner"></div>
</div>

<div class="outer" style="--progress: .5; --bg-color: rebeccapurple">
  <div class="inner"></div>
</div>

CSS

.outer {
  position: relative;
  height: 6px;
  background-color: grey;
  border-radius: 9999px;
  margin: 2em;
}

.inner {
  --lower-hue: 0;
  --upper-hue: 140;

  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;

  background-color: var(--bg-color, hsl(calc((var(--lower-hue) * (1 - var(--progress))) + (var(--upper-hue) * var(--progress))), 50%, 50%));

  width: calc(var(--progress) * 100%);
  height: 100%;

  transition: all ease-in-out 1.25s;
}