Question

我希望进度条应该有三个不同的说从o t0 40是蓝色40到80是红色而80到100是绿色。我搜索了很多但我只是简单的酒吧移动。有没有办法做到这一点。

我正在使用以下代码，但它也没有移动。

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8" />
  <title>jQuery UI Progressbar - Default functionality</title>
  <link rel="stylesheet"  href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
   $(function() {
   $( "#progressbar" ).progressbar({
    value: 37
  });
 });

 </script>
 </head>
 <body>
 <div id="progressbar"></div>
 </body>
 </html>

Answer 1

我不知道它是如何在Jquery UI中，但你可以简单地使用CSS并使2层一个将是掩码，另一个是图像，其中40％的宽度将是蓝色，十个40-80红色和80 - 100绿色然后你需要揭开它。

在JQuery上你需要隐藏这个掩码，它会显示下面的图层。

我用谷歌搜索，我找到了回答你问题的主题

jQuery UI: How to change the color of a ProgressBar?

检查它。

Answer 2

尝试将此Css代码应用于#progressbar

#progressbar{
width:300px;height:14px;
 background-color:#00aeff;
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#00aeff, endColorstr=#ff0000);
 background-image:-moz-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-webkit-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-o-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-ms-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
 background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(40%,#00aeff), color-stop(80%,#ff0000),color-stop(100%,#2fff00));}

Answer 3

听起来你想要在Change事件中挂钩并检查进度的位置，然后从中重新着色。看The API它看起来像是可以的

Answer 4

想到两种不同的方法（如果你不想使用chermanarun提到的CSS3渐变：

背景图片：如果您知道进度条的宽度，只需创建一个背景图形，在指定的点设置三种颜色。将此背景应用于进度指示器。
分层条：这要求您将前两个条的增长“限制”到进度的上限（因此条1不能超过40％，条2不能超过80％）。使用CSS定位和z索引，使所有条形图具有相同的左/顶部位置，并堆叠它们（条形图1在顶部，条形图2在中间，条形图3在底部）。随着装载进度的增长，前两个将停在上限，允许下面的那些继续前进，给人一种无缝进展的幻觉。

如何用不同颜色的html显示进度条

4 个答案: