Fancy progress bar with linear gradients

by dumptyd

HTML

<div class="progress-container">
  <div class="striped-bar bar">
    <div class="dimmed-bar bar"></div>
    <div class="colored-bar bar"></div>
  </div>
</div>

<div class="control">
  <label>Overall Progress</label>
  <input type="number" value="100" max="100" min="0" id="overall">
</div>

<div class="control">
  <label>Colored Bar Progress</label>
  <input type="number" value="80" max="100" min="0" id="colored">
</div>

SCSS

* { box-sizing: border-box; }
body { padding: 5rem 2rem; font-family: Arial; }

$bgcolor: #d9d9d9;
$red: #ff0000; $yellow: #ffa900; $blue: #431186; $green: #009a00;
$grey: #999;
$height: 50px;

.progress-container {
  height: $height; width: 100%;
  border-radius: $height / 2;
  background-color: $bgcolor;
  position: relative; display: flex;
  align-items: center;
  padding: ($height * 0.1);
}

.bar {
  height: 100%;
  border-radius: $height / 2;
  transition: width .5s ease;
}

.striped-bar {
  position: relative;
  width: 100%;
  background: repeating-linear-gradient(
    -45deg,
    $grey,
    $grey $height / 2.5,
    transparent $height / 2.5,
    transparent $height / 1.5
  );
}

.colored-bar {
  position: absolute;
  width: 80%;
  background: linear-gradient(
    to right,
    rgba($red, .8) 10%,
    rgba($yellow, .8) 50%,
    rgba($blue, .8) 75%,
    rgba($green, .8) 100%
  );
}

.dimmed-bar {
  position: absolute;
  width: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba($green, .4) 100%
  );
}

input {
  border: 1px solid $grey;
  padding: .5rem;
  margin-top: .5rem;
}
.control {
  display: inline-flex;
  flex-direction: column;
  margin: 5rem 1rem;
}

JavaScript

const $ = document.querySelector.bind(document);

$('#overall').addEventListener('change', e => {
	$('.striped-bar').style.width = `${e.target.value}%`;
});

$('#colored').addEventListener('change', e => {
	$('.colored-bar').style.width = `${e.target.value}%`;
});