Progress bar with custom background multiple color css/jquery

问题

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.

回答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').css('background-size','4% 100%,50% 100% ,60% 100% ,100% 100% ');
setTimeout(function() {
  $('.progress').html('60%')
  $('.progress').css('background-size','20% 100%,30% 100% ,90% 100% ,100% 100% ');
},2000);

.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-repeat:no-repeat;
 transition:1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Wait to see the animation !
<div class="progress"> 50 %</div>

回答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>

回答3:

You can create a stacked progress bar by placing multiple bars into the same div with class .progress as shown in this w3schools example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Stacked Progress Bars</h2>

  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
      Warning
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
      Danger
    </div>
  </div>
</div>

</body>
</html>