如下图
重点是要实现进度条。
二、分析
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}); 现在随机生成背景色，做一个彩色的进度条。
最终效果：
以上就是彩色的进度条特效，特别适合用于投票，效果很明显，希望对大家的学习有所帮助，会喜欢上这个彩色进度条。