加载进度条（经验）

html部分

<div class="xianshi">

    <div class="yidong"><img src="img/yidong.png"></div>   //背景

    <div class="che"><img src="img/che.png"></div>  //车

    <div id="parent"> //进度条的大框

        <div id="child"></div>   //会改变的进度条

    </div>

    <p id="info"></p>  //百分比

</div>

css部分

.xianshi {

    width: 90%;

    height: 100%;

    overflow: hidden;

    margin: auto;

}

.yidong{

    width: 90%;

    height: 2.8rem;

    margin: 2.38rem auto 0;

}

.yidong img{

    width: 100%;

    height: 100%;

}

.che{

    position: absolute;

    width: 1.41rem;

    height: 0.47rem;

    left: -10%;

    top: 4.75rem;

}

.che img{

    width: 100%;

    height: 100%;

}

#parent {

    border: 1px #3896dd solid;

    width: 100%;

    height: 0.16rem;

    margin: 0 auto;

    border-radius: 50px;

    overflow: hidden;

}

#child {

    width: 100%;

    height: 100%;

    background-color: #3896dd;

}

p {

    text-align: center;

    color: #3896dd;

    font-size: 0.28rem;

}

js部分

<script>

    var pro = 0;

    //定时函数进行更新

    var update = setInterval(function() {

        //进度改变

        pro++;

        //文字提示

        $("#info").text(pro + "%");  //定时器开启时改变百分比

        //动态改变div的宽度占比

        $("#child").width(pro + "%");     //定时器开启时改变进度条的宽度

        var a = $(".che").offset().left;     获取车的left

        $('.che').animate({     //定时器开启时改变车的left

            left: '87%'

        }, 3000, 'linear')      //三秒均速

        //控制更新

        if (pro == 100) {

            //清除定时器，停止更新

            clearInterval(update);

            $('.xianshi').css('display', 'none');

        }

     }, 30);

</script>