ajax请求过程中的loading界面 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); } }

效果：