话不多说，直接上代码，需要配合js才能实现在每次打开页面加载完成前显示加载动画，页面加载完成后动画自动隐藏

html部分：

<div class="loading">
    <div class="loadcm"><i></i> <i></i> <i></i> <i></i> <i></i></div>
    <div class="loadcm2"><i>使</i><i>劲</i><i>全</i><i>力</i><i>加</i><i>载</i><i>中</i></div>
</div>

css部分：

    .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 990;
        background: #fff;
        left: 0;
        top: 0;
    }

    .loading .loadcm {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .loading .loadcm i {
        width: 6px;
        height: 50px;
        margin: 0 2px;
        float: left;
        background: #0ab451;
        -webkit-transform: scaleY(0.4);
        -ms-transform: scaleY(0.4);
        transform: scaleY(0.4);
        -webkit-animation: load 1.2s infinite;
        animation: load 1.2s infinite;
    }

    .loading .loadcm i:nth-child(2) {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .loading .loadcm i:nth-child(3) {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .loading .loadcm i:nth-child(4) {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .loading .loadcm i:nth-child(5) {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    @-webkit-keyframes load {

        0%,
        40%,
        100% {
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }

        20% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }

    @keyframes load {

        0%,
        40%,
        100% {
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }

        20% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }


    .loading .loadcm2 {
        width: 250px;
        height: 30px;
        position: absolute;
        left: 0px;
        top: 100px;
        right: 0;
        bottom: 0;
        margin: auto;
        font-size: 0;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .loading .loadcm2 i {
        font-style: normal;
        display: inline-block;
        -webkit-animation: load2 1.2s infinite;
        animation: load2 1.2s infinite;
        font-size: 14px;
        width: 19px;
        height: 38.5px;
        line-height: 38.5px;
    }

    .loading .loadcm2 i:nth-child(2) {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .loading .loadcm2 i:nth-child(3) {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .loading .loadcm2 i:nth-child(4) {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .loading .loadcm2 i:nth-child(5) {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .loading .loadcm2 i:nth-child(6) {
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }

    .loading .loadcm2 i:nth-child(7) {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    @-webkit-keyframes load2 {

        0%,
        40%,
        100% {
            -webkit-transform: scale(0.6);
            transform: scale(0.6);
            font-size: 20px;
        }

        20% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            color: #0ab451;
            font-size: 24px;
        }
    }

    @keyframes load2 {

        0%,
        40%,
        100% {
            /*-webkit-transform: scale(0.6);
    		transform: scale(0.6);*/
            font-size: 14px;
        }

        20% {
            /*-webkit-transform: scaleY(1);
    		transform: scaleY(1);*/
            font-size: 18px;
            color: #0ab451;
        }
    }

好了，就是这么简单，你学废了吗？