我发现了这个不错的动画进度条教程：
http://www.cssflow.com/snippets/animated-progress-bar/demo
但是进度条不使用 jquery 并且教程没有告诉您如何将多个按钮链接到进度条。所以搜索后我找到了这个教程：
http://www.jcode.ninja/id/8561710
我现在只是简单地使用了上面教程中的代码，看看我是否可以让它工作。
我的问题是如何以与第一个教程相同的方式为进度设置动画？是否可以应用从绿色开始然后渐变为橙色然后渐变为红色的渐变。我可以在 Photoshop 中执行此操作，这不是问题，但您可以将其添加为进度条“皮肤”而不是默认的灰色吗？
提前致谢
【问题讨论】：
标签： javascript jquery css
我使用了第一个教程并创建了一个 JSfiddle： https://jsfiddle.net/LgfcwxLu/
你应该做的是在 .progress css 中添加渐变：
.progress {
padding: 4px;
background: #5fff32; /* Old browsers */
background: -moz-linear-gradient(left, #5fff32 0%, #ff9730 50%, #ff0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5fff32), color-stop(50%,#ff9730), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5fff32 0%,#ff9730 50%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #5fff32 0%,#ff9730 50%,#ff0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #5fff32 0%,#ff9730 50%,#ff0000 100%); /* IE10+ */
background: linear-gradient(to right, #5fff32 0%,#ff9730 50%,#ff0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fff32', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
}
您可以使用此工具创建渐变： http://www.colorzilla.com/gradient-editor/
如果对你有帮助，请告诉我？
【讨论】：
您可以使用 css3 过渡和更改背景颜色。您设置过渡，然后通过更改背景颜色来执行动画。检查这个小提琴：http://jsfiddle.net/en2cb2vq/
CSS 代码：
.square {
width: 50px;
height: 50px;
transition: background-color 0.5s ease;
background-color: red;
}
.square.green {
background-color: green;
}
HTML 代码：
<a href="#">click me</a>
<div class="square"></div>
Javascript（使用 jQuery）：
$("a").click( function() {
$(".square").addClass("green");
return false;
});
【讨论】：
这将是重复的问题已经问过的问题，尝试搜索并实现它，不要问这样的问题，如果代码中有错误意味着你可以发布问题， http://stackoverflow.com/questions/5047498/how-do-you-animate-the-value-for-a-jquery-ui-progressbar
【讨论】：
您可以简单地将彩色进度条中的样式应用到 jQuery UI 进度条上，包括条纹。在下面的 jsfiddle 中，我采用了必要的 css 并将样式表中的 .progress-bar 类名更改为 .ui-progressbar-value。要更改颜色，只需使用 jQuery 内联更改它或为每种颜色添加类并使用 jQuery 切换类。
See the fiddle。它并不完美，但它会给你一个想法。
【讨论】：
您可以使用 CSS Transition of .ui-progressbar-value 为栏设置动画。
.ui-progressbar-value{
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
注意：Transition 不是跨浏览器。
参考文献：http://www.w3schools.com/css/css3_transitions.asp
您可以使用旧浏览器和其他方法。 jQuery UI 在他的源代码中有color animation：
我将 Fiddle 改为使用 jquery 来代替转换：
看一看：http://jsfiddle.net/y2mg8ejk/2/
jQuery UI - 彩色动画[doc]：http://jqueryui.com/animate/
您可以将其与旧浏览器一起使用，transition 与其他浏览器一起使用。
【讨论】：