引用jquery_jQuery+csss实现简单多彩发光进度条

前言：进度条在onload加载，banner轮播，文件上传进度，注册页面导航等等应用场景的时候很有用，今天我们使用jquery+css来实现一个简单的多彩发光进度条效果。

小提示：完整版源码在教程最下方！

fierfox浏览器效果如下：

关键知识点:

setInterVal定时器，css盒阴影，css圆角，元素尺寸改变拼接技术。

实现思路：

指定一个父容器来作为进度条内容的父元素，指定一个进度条内容宽度为0的元素，指定父元素和子元素的样式，设置一个条件定时器setInterVal,判断进度条内容元素的宽度是否小于进度条容器(父元素)的宽度，如果小于等于父元素的宽度，进度条内容元素的宽度+1，通过jquery.css()方法改变内容元素的宽度，否则停止定时器。

实现代码：

创建进度条容器和进度条内容元素:

指定进度条容器元素样式，设置宽度为300px,高10px,边框为1px，实体，黑色，设置边框圆角美化进度条，发光效果使用盒阴影box-shadow

.progressBarBlue { width: 300px; margin: 10px auto; height: 10px; border: 1px solid #98AFB7; /**设置为黑色边框**/ border-radius: 5px; /**设置边框圆角属性**/ box-shadow: 0 0 2px 2px aqua; /**x轴偏移和Y轴偏移都设置为0，后面两参数是阴影模糊半径和引用扩展半径**/}

指定进度条内容元素样式,高度和父元素保持一致，宽度设置为0，这时候进度条内容是不显示的，指定背景颜色，设置圆角样式美观！

.progressBarContentBlue { height: inherit; /**高度和父容器保持一致**/ width: 0; /**初始宽度设置为0，很关键**/ background-color: #5EC4EA; border-radius: 5px; /**设置边框圆角属性**/}

jQuery实现：

初始化进度条内容元素的宽度为0，防止出错

得到进度条容器的宽度并且转换为Int类型，便于运算，如果不转换，默认是的string类型

设置定时器，得到进度条内容元素的宽度，判断，小于父元素宽度，子元素内容+1，jquery.css()改变样式，如果大于等于父元素，停止定时器。

$(bars).css("width