<div class="loadingcontainer" :style="{display:disp}">

    <div class="spinner">

        <div class="spinner-container container1">

            <div class="circle1"></div>

            <div class="circle2"></div>

            <div class="circle3"></div>

            <div class="circle4"></div>

        </div>

        <div class="spinner-container container2">

            <div class="circle1"></div>

            <div class="circle2"></div>

            <div class="circle3"></div>

            <div class="circle4"></div>

        </div>

        <div class="spinner-container container3">

            <div class="circle1"></div>

            <div class="circle2"></div>

            <div class="circle3"></div>

            <div class="circle4"></div>

        </div>

    </div>

</div>

/*css*/

.loadingcontainer {

    width: 100%;

    height: 100%;

    background-color: rgba(255, 255, 255, .4);

    position: fixed;

    z-index:;

    top:;

    /*margin-top: 70px;*/

    /*margin-left: -30px;*/

}

@media only screen and (max-width: 350px) {

    .a_conts p {

        font-size: 10px;

    }

    .a_conts h2 {

        font-size: 12px;

    }

}

@-webkit-keyframes leftRight {

    0% {

        -webkit-transform: translate3d(-100%, 0, 0);

        transform: translate3d(-100%, 0, 0);

    }

    100% {

        -webkit-transform: translate3d(150%, 0, 0);

        transform: translate3d(150%, 0, 0);

    }

}

@keyframes leftRight {

    0% {

        -webkit-transform: translate3d(-100%, 0, 0);

        transform: translate3d(-100%, 0, 0);

    }

    100% {

        -webkit-transform: translate3d(150%, 0, 0);

        transform: translate3d(150%, 0, 0);

    }

}

@-webkit-keyframes hoverMove {

    0% {

        -webkit-transform: translate3d(12px, 12px, 0);

        transform: translate3d(12px, 12px, 0);

    }

    100% {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

    }

}

@keyframes hoverMove {

    0% {

        -webkit-transform: translate3d(12px, 12px, 0);

        transform: translate3d(12px, 12px, 0);

    }

    100% {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

    }

}

.spinner {

    margin: auto;

    width: 60px;

    height: 60px;

    position: relative;

    top: calc(50% - 25px)

}

.container1 > div, .container2 > div, .container3 > div {

    width: 10px;

    height: 10px;

    background-color: #333;

    border-radius: 100%;

    position: absolute;

    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;

    animation: bouncedelay 1.2s infinite ease-in-out;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

}

.spinner .spinner-container {

    position: absolute;

    width: 100%;

    height: 100%;

}

.container2 {

    -webkit-transform: rotateZ(45deg);

    transform: rotateZ(45deg);

}

.container3 {

    -webkit-transform: rotateZ(90deg);

    transform: rotateZ(90deg);

}

.circle1 {

    top:;

    left:;

}

.circle2 {

    top:;

    right:;

}

.circle3 {

    right:;

    bottom:;

}

.circle4 {

    left:;

    bottom:;

}

.container2 .circle1 {

    -webkit-animation-delay: -1.1s;

    animation-delay: -1.1s;

}

.container3 .circle1 {

    -webkit-animation-delay: -1.0s;

    animation-delay: -1.0s;

}

.container1 .circle2 {

    -webkit-animation-delay: -0.9s;

    animation-delay: -0.9s;

}

.container2 .circle2 {

    -webkit-animation-delay: -0.8s;

    animation-delay: -0.8s;

}

.container3 .circle2 {

    -webkit-animation-delay: -0.7s;

    animation-delay: -0.7s;

}

.container1 .circle3 {

    -webkit-animation-delay: -0.6s;

    animation-delay: -0.6s;

}

.container2 .circle3 {

    -webkit-animation-delay: -0.5s;

    animation-delay: -0.5s;

}

.container3 .circle3 {

    -webkit-animation-delay: -0.4s;

    animation-delay: -0.4s;

}

.container1 .circle4 {

    -webkit-animation-delay: -0.3s;

    animation-delay: -0.3s;

}

.container2 .circle4 {

    -webkit-animation-delay: -0.2s;

    animation-delay: -0.2s;

}

.container3 .circle4 {

    -webkit-animation-delay: -0.1s;

    animation-delay: -0.1s;

}

@-webkit-keyframes bouncedelay {

    0%, 80%, 100% {

        -webkit-transform: scale(0.0)

    }

    40% {

        -webkit-transform: scale(1.0)

    }

}

@keyframes bouncedelay {

    0%, 80%, 100% {

        transform: scale(0.0);

        -webkit-transform: scale(0.0);

    }

    40% {

        transform: scale(1.0);

        -webkit-transform: scale(1.0);

    }

}

@-webkit-keyframes roll {

    0% {

        -webkit-transform: rotate(0);

        transform: rotate(0);

    }

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@keyframes roll {

    0% {

        -webkit-transform: rotate(0);

        transform: rotate(0);

    }

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

//  请求前

$('.loadingcontainer').show();

//请求结束

$('.loadingcontainer').hide();