ajax+请求+loading,ajax请求过程中的loading界面

要求：在ajax发送请求时，呈现获取数据的一个loading界面，但数据请求成功时loading界面消失。

//html

//css

.loadingcontainer{

width: 100%;

height: 100%;

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

position: fixed;

z-index: 300;

top:0;

}

@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: 100px auto;

width: 20px;

height: 20px;

position: relative;

top: 20%

}

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

width: 6px;

height: 6px;

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: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }

.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);

}

}

效果：

QQ20180412-155148.png