Css3 loads ing animation and css3 loads ing

Css3 loads ing animation and css3 loads ing
Before the ajax interaction is successful in the project, you will always need to remind the user, such as please wait and loading. gif is used in the project before the animation is waiting, and the image quality on the Mobile End is very poor, with edges, css3 is used in the new project to show the animation effect in the loading process.

Function tipLoading (type, top, left) {if ($ ("arrorbox") $ ('# arrorbox '). remove (); var dataType = ['< div class = "sk-circle"> <div class = "sk-circle1 sk-child"> </div> <div class = "sk-circle2 sk-child"> </div> <div class = "sk-circle3 sk-child"> </div> <div class = "sk-circle4 sk-child"> </div> <div class =" sk-circle5 sk-child "> </div> <div class =" sk-circle6 sk-child "> </div> <div class =" sk-circle7 sk-child "> </div> <div class = "Sk-circle8 sk-child"> </div> <div class = "sk-circle9 sk-child"> </div> <div class = "sk-circle10 sk-child"> </div>> <div class = "sk-circle11 sk-child"> </div> <div class = "sk-circle12 sk-child"> </div> ', '<div class = "spinner"> <div class = "bounce1"> </div> <div class = "bounce2"> </div> <div class = "bounc4"> </div> ',], html = "<div class = 'tiploading '> </div>", type = type | 0, top = top | "48%", left = left | "50%", timer = null; $ ("body "). append (html); if ($ (". tiploading ") {$ (". tiploading ").css ({" margin-left ":-20 +" px "," left ": left," top ": top });! Type = 1? $ (". Tiploading "). append (dataType [type] + "<div class = 'tiploading-con'> Please wait </div>"): $ (". tiploading "). append (dataType [type] + "<div class = 'tiploading-con'> </div>") ;}} function tipLoadingRemove () {if ($ (". tiploading ") {$ (". tiploading "). remove ();}}

Js is put in the project public, and styles are put in the public style. tipLoading (type, top, left) is called at call, called before ajax interaction is successful, and tipLoadingRemove () is called after ajax interaction is successful, you can also add a timeout value, but let the deletion be completed. There are currently only two types of types. There are many types of types available on the Internet. You can add them as needed. The first type is 0 by default, and the second type is 1. Top and left are positions.

Css logging Handler

/* Wm 12-10 wm loading style */. tiploading {width: 40px; height: 40px; background: rgba (0, 0, 0 ,. 7); position: fixed; border-radius: 10px; z-index: 9999 ;}. tiploading. tiploading-con {position: absolute; bottom: 10px; left: 0; width: 100%; height: 20px; line-height: 20px; font-size: 12px; color: # fff; text-align: center;}/* type1 */. sk-circle {width: 30px; height: 30px; position: relative; top: 5px; left: 5px ;}. sk-circle. sk-child {width: 100%; height: 100%; position: absolute; left: 0; top: 0 ;}. sk-circle. sk-child: before {content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: # fff; border-radius: 100%;-webkit-animation: sk-circleBounceDelay 1.2 s infinite transfer-in-out both; animation: sk-circleBounceDelay 1.2 s infinite transfer-in-out both ;}. sk-circle. sk-circle2 {-webkit-transform: rotate (30deg);-ms-transform: rotate (30deg); transform: rotate (30deg );}. sk-circle. sk-circle3 {-webkit-transform: rotate (60deg);-ms-transform: rotate (60deg); transform: rotate (60deg );}. sk-circle. sk-circle4 {-webkit-transform: rotate (90deg);-ms-transform: rotate (90deg); transform: rotate (90deg );}. sk-circle. sk-circle5 {-webkit-transform: rotate (120deg);-ms-transform: rotate (120deg); transform: rotate (120deg );}. sk-circle. sk-circle6 {-webkit-transform: rotate (150deg);-ms-transform: rotate (150deg); transform: rotate (150deg );}. sk-circle. sk-circle7 {-webkit-transform: rotate (180deg);-ms-transform: rotate (180deg); transform: rotate (180deg );}. sk-circle. sk-circle8 {-webkit-transform: rotate (210deg);-ms-transform: rotate (210deg); transform: rotate (210deg );}. sk-circle. sk-circle9 {-webkit-transform: rotate (240deg);-ms-transform: rotate (240deg); transform: rotate (240deg );}. sk-circle. sk-circle10 {-webkit-transform: rotate (270deg);-ms-transform: rotate (270deg); transform: rotate (270deg );}. sk-circle. sk-circle11 {-webkit-transform: rotate (300deg);-ms-transform: rotate (300deg); transform: rotate (300deg );}. sk-circle. sk-circle12 {-webkit-transform: rotate (330deg);-ms-transform: rotate (330deg); transform: rotate (330deg );}. sk-circle. sk-circle2: before {-webkit-animation-delay:-1.1 s; animation-delay:-1.1 s ;}. sk-circle. sk-circle3: before {-webkit-animation-delay:-1 s; animation-delay:-1 s ;}. sk-circle. sk-circle4: before {-webkit-animation-delay:-0.9 s; animation-delay:-0.9 s ;}. sk-circle. sk-circle5: before {-webkit-animation-delay:-0.8 s; animation-delay:-0.8 s ;}. sk-circle. sk-circle6: before {-webkit-animation-delay:-0.7 s; animation-delay:-0.7 s ;}. sk-circle. sk-circle7: before {-webkit-animation-delay:-0.6 s; animation-delay:-0.6 s ;}. sk-circle. sk-circle8: before {-webkit-animation-delay:-0.5 s; animation-delay:-0.5 s ;}. sk-circle. sk-circle9: before {-webkit-animation-delay:-0.4 s; animation-delay:-0.4 s ;}. sk-circle. sk-circle10: before {-webkit-animation-delay:-0.3 s; animation-delay:-0.3 s ;}. sk-circle. sk-circle11: before {-webkit-animation-delay:-0.2 s; animation-delay:-0.2 s ;}. sk-circle. sk-circle12: before {-webkit-animation-delay:-0.1 s; animation-delay:-0.1 s;} @-webkit-keyframes sk-circleBounceDelay {0%, 80%, 100% {-webkit-transform: scale (0); transform: scale (0);} 40% {-webkit-transform: scale (1); transform: scale (1) ;}@ keyframes sk-circleBounceDelay {0%, 80%, 100% {-webkit-transform: scale (0); transform: scale (0 );} 40% {-webkit-transform: scale (1); transform: scale (1) ;}/ * type2 */. spinner {margin: 10px auto; width: 40px; text-align: center ;}. spinner> div {width: 8px; height: 8px; background-color: # fff; border-radius: 100%; display: inline-block;-webkit-animation: sk-bouncedelay 1.4 s infinite transfer-in-out both; animation: sk-bouncedelay 1.4 s infinite transfer-in-out both ;}. spinner. bounce1 {-webkit-animation-delay:-0.32 s; animation-delay:-0.32 s ;}. spinner. bounce2 {-webkit-animation-delay:-0.16 s; animation-delay:-0.16 s;} @-webkit-keyframes sk-bouncedelay {0%, 80%, 100% {-webkit-transform: scale (0)} 40% {-webkit-transform: scale (1.0) }}@ keyframes sk-bouncedelay {0%, 80%, 100% {-webkit-transform: scale (0); transform: scale (0);} 40% {-webkit-transform: scale (1.0); transform: scale (1.0 );}}

Type1