本文主要包含不同颜色的进度条,css3进度条等相关知识,佚名 希望在学习及工作中可以帮助到您
一款进度条，它的外观是一条直线，末端有个小球，在进度变化时可以显示数字百分比，更可以用不同颜色来表示当前进度的状态。来看看效果图。
接下来我们来分析一下这款HTML5进度条的实现源码，篇幅有限，我们只挑核心的代码来说。
HTML代码很简单，构造一个进度条容器和数字百分比容器：
首先我们来对进度条的容器进行样式渲染，利用CSS3的渐变属性来实现不同进度变换颜色的效果：
接下来是末端小圆球的样式：
这里也是利用的CSS3的渐变属性。
然后是数字百分比的样式属性，这里随着进度变化，数字百分比的颜色也会发生变化。
最后，我们再来看看JS代码，其实js要完成的工作非常简单，只需要将CSS3渲染好的进度条动起来就好，看代码：