使用jquery实现进度条效果

jquery特效

很多时候，我们系统的进度信息有个进度条看起来效果更好，我们可以使用动态改变div占比的方案来做：

效果:

 

style样式：

   <style type="text/css">
        #parent{border:1px #EEE solid;width: 500px;height: 30px;margin: 0 auto;}
        #child{width: 50%;height: 30px;background-color: lime;}
        p{text-align: center;color: fuchsia;}
    </style>

 

HTML代码：

    <p id="info"></p>
    <div id="parent">
        <div id="child"></div>
    </div>

JS代码：

//记录进度
        var pro=0;
        //定时函数进行更新
        var update=setInterval(function(){
            //进度改变
            pro++;
            //文字提示
            $("#info").text("正在更新："+pro+"%");
            //动态改变div的宽度占比
            $("#child").width(pro+"%");
            //控制更新
            if(pro==100){
                //清除定时器，停止更新
                clearInterval(update);
                alert("恭喜，更新成功！");
            }
        },100);