页面加载load

• html code

<div class="loader" style="display:block">
        <div class="la-ball-clip-rotate">
        <div></div>
    </div>
</div>

• css code

.loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #000 50% 50%;
    opacity: .3;
}
.la-ball-clip-rotate {
    display: block;
    font-size: 0;
    color: #428bca;
    width: 64px;
    height: 64px;
}

.la-ball-clip-rotate, .la-ball-clip-rotate>div {
    position: relative;
    left: 50%;
    top: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.la-ball-clip-rotate>div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
    width: 64px;
    height: 64px;
    border-width: 4px;
    background: 0 0;
    border-bottom-color: transparent;
    border-radius: 100%;
    -webkit-animation: ball-clip-rotate .5s linear infinite;
    -moz-animation: ball-clip-rotate .5s linear infinite;
    -o-animation: ball-clip-rotate .5s linear infinite;
    animation: ball-clip-rotate .5s linear infinite;
}