使用jquery实现进度条效果

   <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>

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

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