预加载加进度条完整特效代码

效果图

Html

<div class="preloader">
    <div class="preloader__wrap">
        <div class="circle-pulse">
            <div class="circle-pulse__1"></div>
            <div class="circle-pulse__2"></div>
        </div>
        <div class="preloader__progress"><span></span></div>
    </div>
</div>

Style/Css

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1106;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #fff;
    text-align: center;
    opacity: 1;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
}

.preloader__wrap {
    width: 100%;
    max-width: 150px;
}

.circle-pulse>* {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    border-radius: 50%;
    transform: scale(0, 0);
    animation: pulse 1.6s linear infinite;
}

.circle-pulse__1 {
    margin-top: -3rem;
    margin-left: -3rem;
    width: 6rem;
    height: 6rem;
    background-color: #2196f3;
}

.circle-pulse__2 {
    margin-top: -2.4rem;
    margin-left: -2.4rem;
    width: 4.8rem;
    height: 4.8rem;
    background-color: #2196f370;
    animation-delay: -.3s;
    -webkit-animation: pulse 1s;
}

.preloader__progress {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 2px;
    background: #fff;
}

.preloader__progress span {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #0045ff;
    transition: opacity .5s linear;
}

.preloader__progress .done {
    opacity: 0;
}

@-webkit-keyframes pulse {
    30% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

JavaScript

$(document).ready(function() {
    $(function () {
     setInterval(function(){ 
         $(".preloader").fadeOut();
        },
        1000); //设定1秒之后隐藏
    });
    $({property: 0
    }).animate({property: 100
    },
    {
     duration: 1000, step: function(){
     var percentage = Math.round(this.property);
     $('.preloader__progress span').css('width', percentage+"%");
     if(percentage == 100){
     $(".preloader__progress span").addClass("done");
            }
        }
    });
});