Multiple ways to achieve loading (load) animation effects

When we submit a button in Ajax, give the button a loading effect will be a lot more high-end, experience will rise to a level.

Not only can let the user know is committing , also can prevent two times commits , the benefit is many.

The circle above is going to roll. Simple words, can be directly with the GIF animated image implementation. But now there are CSS3 and HTML5, several kinds of high-on-the-way implementation.

Here first to introduce a few animated online demo, the first is HTML5 boilerplate in the Effeckt.css, the second is animate.css.

Listed below, if you want to combine the button, you can modify the CSS or JS and other files. When you want to embed in the actual project, you may change some places, the actual situation will prevail.

First, PNG picture +CSS3 animation

<class= "pull-up pull-up-loading">  <   Class= "Pull-icon"></span> is loading .... </ Div >

. pull-up-loading. Pull-icon{background-position:0 100%;/*Chrome*/-webkit-transform:Rotate (0deg) translatez (0);-webkit-transition-duration:0ms;-webkit-animation-name:Loading;-webkit-animation-duration:2s;-webkit-animation-iteration-count:Infinite;-webkit-animation-timing-function:Linear;}/*Chrome*/@-webkit-keyframes Loading{From {-webkit-transform:Rotate (0deg) translatez (0); } to{-webkit-transform:Rotate (360deg) translatez (0); }}

Click to view the online example:

1. Only when the pull-up-loading is addedwill the scroll appear.
2. Add an animation keyframes, called loading, is doing transform:rotate operation, the following CSS omitted the animation code in Firefox, in order to see the clear point, the instance has the full Firefox code

Here is a pure CSS code that generates loading online,cssload.net. Style selection is still quite a bit, that is, the compatibility of older browsers is not very strong such as IE6, IE7, IE8 and so on.

A few more different styles: Click to view the source code

Second, spin.js

This is a script file. Do not rely on any library, can be executed independently, very useful, I used this plugin in the actual project, then I put all the AJAX submissions call this plug-in, combined with the jquery library, do loading effect and prevent two commits. and the browser compatibility of this library is very good, even compatible with the old IE6, and do not introduce additional CSS or diagrams, configurable parameters are also many.

I have read the code roughly, the standard browser is scripted to write CSS3 to do animation, for the ancient point of the browser with settimeout to simulate the animation. It also initializes a VML tag, which is for IE.

Look at the code when you see a very interesting symbol "~ ~", the back of a search, said to be a variable into a number of methods, very advanced.

This plugin also provides an online configuration of a small website, Click to view :

Showajaxloading:function(BTN) {if(BTN = =NULL|| BTN = = Undefined | | $ (btn). length = = 0)return; varleft =$ (BTN). Offset (). Left; vartop =$ (BTN). Offset (). Top; varwidth =$ (BTN). Outerwidth (); varHeight =$ (BTN). Height (); varopts ={lines:9,//The number of lines to drawlength:0,//The length of each lineWidth:10,//The line thicknessRadius:15,//The radius of the inner circleCorners:1,//Corner roundness (0..1)rotate:0,//The rotation offsetDirection:1,//1:clockwise, -1:counterclockwiseColor: ' #000 ',//#rgb or #rrggbb or array of colorsSpeed:1,//Rounds per secondtrail:81,//Afterglow PercentageShadowfalse,//Whether to render a shadowHwaccel:false,//Whether to use hardware accelerationClassName: ' Spinner ',//The CSS class to assign to the spinnerZindex:2e9,//The z-index (defaults to 2000000000)Top: ' 50% ',//Top Position relative to parentLeft: ' 50% '//Left position relative to parent    }; $(' #ajax_spin '). Remove (); $(' Body '). Append (' <div id= "Ajax_spin" style= "Position:absolute;background: #FFF; Filter:alpha (opacity=30); opacity : 0.3 "><div id=" Ajax_spin_inner "style=" position:relative;height:50px; " ></div></div> '); $(' #ajax_spin '). css ({' Top ': Top,' Left ': Left,' Width ': Width,' Height ': Height}); vartarget = document.getElementById (' Ajax_spin_inner '); varSpinner =NewSpinner (opts). Spin (target); //return spinner;}, Stopajaxloading:function() {    $(' #ajax_spin '). Remove (); //new Spinner (opts). Spin (target)    //spinner.stop ();}

The above code is what I wrote in a real project, which is to show and remove the loading effect, and overlay the effect on the button to prevent two commits.

1. BTN is the button jquery object
2. Left,top find the left and right displacement of the button, width and height to get the width and height of the button, width with the outerwidth
3. $ (' body ') to add a layer that can override the button
4. Initialize a Spinner object and add it to that overlay

Third, Ladda

Can be used alone, or combined with the above plug-in spin together. The demo page has a very large effect, but it may still require some modification.

Click to view home page

Choose a few examples, you can achieve different sizes of button size, different directions of scrolling, the button into a prototype, or a button with a progress bar. It's quite diverse.

Click to view demo page :

The HTML code is as follows:

 <  button  class  = "Ladda-button"   Data-style  = "Expand-right"  ><  span  class  = "Ladda-label"  >  Submit</ span  ></ button  >  

// automatically trigger the loading animation on click Ladda.bind (' input[type=submit] ' ); // same as the above but automatically stops after the seconds Ladda.bind (' input[type=submit] ', {timeout:2000});

The structure does not look very complicated, and the introduction of JS script is not very difficult. However, in the introduction of actual projects will definitely need to make some changes.

Compared to the spin plug-in, this plugin to introduce more files, not only to introduce JS also to introduce CSS.

　　Click to view the code copied on Codepen

I would like to be in the Codepen page, the demo page to reproduce once, in the GitHub dist/css/ladda.min.css files copied to Codepen, JS in the Ladda.js and Spin.js also copied over. There was a bit of an accident, and the scroll bar would always go down a bit. CSS is all copied, very strange. Later found to be the problem of CSS, it is really practical application to see the specific situation.

　　

　　

CSS for the demo page:

{  position: absolute;   z-index: 2;   display: inline-block;   width: 32px;   height: 32px;   top: 50%;   margin-top: -17px;   opacity: 0;   pointer-events: None}

The CSS on GitHub: The difference is that margin-top is not the same.

{  position: absolute;   z-index: 2;   display: inline-block;   width: 32px;   height: 32px;   top: 50%;   margin-top: 0;   opacity: 0;   pointer-events: None}

Iv. Sonic.js

This plugin is to create a canvas canvas to achieve loaing animation effects. The style is also more, as shown in: Click to view the online demo

The online demo also shows the animation using CSS3 animated +css Sprite technology.

Click to view GitHub homepage

For older browsers, Sonic also handles the conversion of canvas to GIF images. Click to view Sonicgif

(go) Multiple ways to implement loading (load) animation effects