一、需求
如下图
重点是要实现进度条。
二、分析
html5新增及删除标签一文中提到过html5新增了progress标签。但是肯定有兼容性问题。生成环境不适用，所以要模拟实现。
原理：动态设置
的子元素的宽度值。
1、简单的雏形
假设只有一个进度条，如下，我们只需要知道p元素的宽度，span元素的百分比，相乘即得到span的宽度，浏览器加载时动态设置span的宽度即可实现进度条的效果。
2、投票进度条实现过程
第一步：结构如下
-
A：
79（2%）
-
B：
1986（61%）
-
C：
1153（36%）
-
D：
415（13%）
-
E：
89（3%）
给span增加一个width和背景色，就可以出现进度条的效果。这一步用js实现。
第二步、js设置span的宽度
效果：
第三步，js设置span的背景色
第二步中的背景色都是如下设置为一样。
$(spanArr[i]).css({'background-color':"#c2f263"});
现在随机生成背景色，做一个彩色的进度条。
最终效果：
以上就是彩色的进度条特效，特别适合用于投票，效果很明显，希望对大家的学习有所帮助，会喜欢上这个彩色进度条。
