具有自定义背景多种颜色的进度条CSS/jQuery [英] Progress bar with custom background multiple color css/jquery

问题描述

我的目标是实现具有自定义背景的进度条. 最终结果应该是这样的:

背景为(依次)绿色，黄色和红色. 淡蓝色的颜色是背景...进度线.

有一些教程可以做到这一点吗? 我已经意识到一些进度条，但是我没有自定义背景. 谢谢.

解决方案

只需使用线性渐变，就可以根据需要指定任意数量的颜色并轻松控制每种颜色的百分比:

 .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> 

您还可以考虑多个渐变，并且可以通过调整background-size轻松使用jQuery管理它们:

 $('.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> 

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.

解决方案

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>

这篇关于具有自定义背景多种颜色的进度条CSS/jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！