Progress bar with custom background multiple color css/jquery

Question

my target is realize a progress bar with custom background. the final result should be look at this:

the background it's (in order) green, yellow and red. The lightblue color it's over the background...the progress line.

There are some tutorial for make this? I've already realize some progress bar, but nothing with custom background that i would. Thanks.

Answer 1

Simply use linear-gradient and you can specify as many color as you want and control the % of each one easily:

.progress {
 height:52px;
 width:500px;
 border:2px solid #000;
 text-align:center;
 color:#fff;
 font-size:20px;
 background:linear-gradient(to right, red 20%, blue 20%, blue 50%,yellow 50%,yellow 60% ,green 0);
}

<div class="progress"> 50 %</div>

You can also consider multiple gradient and you can easily manage them using jQuery by adjusting background-size:

.progress {
 height:52px;
 width:500px;
 border:2px solid #000;
 text-align:center;
 color:#fff;
 font-size:20px;
 background-image:
   linear-gradient(red,red),
   linear-gradient(blue,blue),
   linear-gradient(green,green),
   linear-gradient(yellow,yellow);
 background-size:
   4% 100%,
   50% 100%,
   60% 100%,
   100% 100%;
 background-repeat:no-repeat;
 transition:1s;
}
.progress:hover {
 background-size:
   20% 100%,
   30% 100%,
   90% 100%,
   100% 100%;
}

Hover to see the animation !
<div class="progress"> 50 %</div>

Answer 2

Use Gradients below is the sample code.I have try

/* PROGRESS */
.progress {
  background-color: #e5e9eb;
  height: 1em;
  position: relative;
  width: 34em;
}
.progress-bar {
  animation-duration: 3s;
  animation-name: width;
  background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  background-size: 24em 0.25em;
  height: 100%;
  position: relative;
}
@keyframes width {
  0%, 100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

  <h1 class="text-center">Progress Bar</h1>

  <div class="progress">

    <div class="progress-bar">

      <div class="progress-shadow"></div>

    </div>

  </div>