* {
    margin: 0;
    padding: 0;
}

body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.loading_body {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
}

.loading_top {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20%;
    left: 50%;
    margin-left: -50px;
    text-align: center;
    line-height: 100px;
}

.loading_top>div {
    width: 20px;
    height: 20px;
    position: absolute;
}

.loading_top>i {
    font-size: 80px;
    color: #6BCBB1;
}

.loading_top .lt {
    border-top: 4px solid #6BCBB1;
    border-left: 4px solid #6BCBB1;
    left: -2px;
    top: -2px;
}

.loading_top .rt {
    border-top: 4px solid #6BCBB1;
    border-right: 4px solid #6BCBB1;
    right: -2px;
    top: -2px;
}

.loading_top .rb {
    border-bottom: 4px solid #6BCBB1;
    border-right: 4px solid #6BCBB1;
    right: -2px;
    bottom: -2px;
}

.loading_top .lb {
    border-bottom: 4px solid #6BCBB1;
    border-left: 4px solid #6BCBB1;
    left: -2px;
    bottom: -2px;
}

.loading_top .tb {
    width: 100%;
    height: 1px;
    background: #6BCBB1;
    top: 0;
    left: 0;
    animation: tb_ani 3s linear 0s infinite;
    -webkit-animation: tb_ani 3s linear 0s infinite;
    -moz-animation: tb_ani 3s linear 0s infinite;
}

.loading_center {
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 60%;
}
.ball-pulse{
    position: absolute;
    left: 50%;
    margin-left: -144px;
}
.ball-pulse>div:nth-child(1) {
    -webkit-animation: scale 1.5s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div:nth-child(2) {
    -webkit-animation: scale 1.5s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div:nth-child(3) {
    -webkit-animation: scale 1.5s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div:nth-child(4) {
    -webkit-animation: scale 1.5s 0.48s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s 0.48s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div:nth-child(5) {
    -webkit-animation: scale 1.5s 0.6s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s 0.6s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div:nth-child(6) {
    -webkit-animation: scale 1.5s 0.72s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s 0.72s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.ball-pulse>div {
    background-color: #6BCBB1;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    margin:0 14px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
}
.loading_bottom {
    width: 100%;
    position: absolute;
    top: 80%;
    text-align: center;
}
@keyframes tb_ani {
    0% {
        top: 0;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes tb_ani {
    0% {
        top: 0;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.7;
    }
    20% {
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.7;
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.7;
    }
    20% {
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.7;
    }
}