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

我希望进度条应该有三种不同的说法，从o t0开始40是蓝色的40到80是红色的，从80到100是绿色的。我搜索了很多，但我我只能简单地移动酒吧。有没有办法做到这一点。如何在不同颜色的html中显示进度条

我使用的是以下代码，但它也不动。

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

来源

2013-04-03 Shahzad Ali

你应该与此链接重：http://stackoverflow.com/questions/6013067/dynamically-change-the-color-of-jquery-progress-bar – secretlm

@secretlm在这使得所有的背景绿色我想要部分明智的，如果它初始显示红色，然后像红色一样的绿色s –

我不知道它是如何在jQuery UI的，但你可以简单地使用CSS，使2层一会面膜，另一种是像在那里它40％的宽度将是蓝色，十40-80红色和80 - 100绿色，那么你需要揭开它。

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

我用Google搜索，我发现这里的主题是回答你的问题

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

检查。

来源

2013-04-03 07:04:31 Robert

它与不同的颜色，但我想在单个酒吧三种不同的颜色 –

尝试这个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));}

来源

2013-04-03 07:40:25

听起来好像要在西奥Change事件挂钩，并检查其中的进展，然后重新着色从了吧。看着The API看起来浮现在脑海中（douable

来源

2013-04-03 07:50:43 VeXii

两种不同的方法，如果你不希望使用chermanarun提到的CSS3渐变：

背景画面：如果你知道如何宽你的进步将这个背景应用于进度指示器
分层条纹：这要求您'限制'第一个条形码的增长两个酒吧的进展上限（所以酒吧1不能超过40％，第2栏不能超过80％）。使用CSS定位和z-indexing，以便所有酒吧都有相同的左/顶部位置，并堆叠它们（酒吧1顶部，酒吧2在中间，酒吧3在底部）。随着钢筋随着加载进度的增加而增长，前两个将停在上限，允许下面的钢筋继续前进，给人一种无缝进展的幻觉。

来源

2013-04-03 09:20:02 MassivePenguin

你可以写一些代码方法一 –

'#progressbar .ui -progressbar-value {background：blue url（path/to/your/image.png）no-repeat left top; }'此CSS应该应用您的图像，而不是由jQuery UI提供的默认灰度渐变。将bg颜色默认设置为蓝色（将其更改为图像中使用的蓝色的十六进制代码）可以让背景图像在较慢的连接上加载。 – MassivePenguin

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

回答

相关问题