Ajax loading Chrysanthemum loding effect

Ajax asynchronous request, generally use a dynamic Gif small image to make an Ajax Loading, in order to increase the user experience.

Here we use Spin.js, the JS script compresses after 5k, can create an AJAX Loading indicator without any image, any external CSS style

spin.js Online Design, demo and for : http://fgnass.github.io/spin.js/

In the link page, we can dynamically set the style and automatically generate the style configuration script:

Spin.js usage is extremely simple:

Show Spinner

var Target=document.getelementbyid ("id")
Spinner.spin (target);

Hide Spinner
Spinner.spin ();

Let's do a simple and complete example to experience it once:

<Scripttype= "Text/javascript"src= "Zepto.min.js"></Script><Scripttype= "Text/javascript"src= "Spin.min.js"></Script><Scripttype= "Text/javascript">  //The first parameter is the label loaded by the loading icon, the second is an AJAX data interface, and the third is the callback function.   functionLoadajaxspin (Ele, Get_url, callback) {varopts={lines: -, //Number of PetalsLength: -, //Petal LengthWidth:Ten, //Petal Widthradius: -, //Petal Distance Center radiusScale :1, Corners:1, //Petal Smoothness (0-1)Color:'#000', //Petal Coloropacity:0.25, rotate:0, //Petal Rotation Angledirection:1, //Petal Rotation Direction 1: Clockwise,-1: CounterclockwiseSpeed :1, //Petal Rotation SpeedTrail: -, //drag on petals rotation (percent)ZIndex:2e9, //Spinner Z-axis (default is 2000000000)ClassName:'Spinner', //spinner CSS style nameTop:'50%', //Spinner relative parent container top positioning unit pxLeft :'50%', //Spinner Relative parent container left positioning unit pxShadow:false, //whether petals show ShadowsHwaccel:false, //spinner whether hardware acceleration and high speed rotation are enabledPosition:'Absolute'    }; varSpinner= NewSpinner (opts);    $ (ele). Show (); varTarget=$ (ele) [0];    Spinner.spin (target); $.ajax ({url:get_url, DataType:'HTML', Success:function(data) {Spinner.spin ();        $ (ele). Hide ();      callback (data); }    })  }  varFoo= function(data) {Console.log (data); }  $(function() {    $('#btnRequest'). On ('Click', function() {Loadajaxspin ('. Spin', 'http://192.168.1.191/h5/font.html', foo);  }); });</Script><Divclass= "Spin"></Div><Div>  <inputID= "Btnrequest"type= "button"value= "Request Data" /></Div>

In the example above, we have written a function loadajaxspin, which is the loading icon that appears before the Ajax call starts, and the loading icon disappears after the data is loaded.

Effect: Displays the chrysanthemum after clicking, then executes the callback function.

Ajax loading Chrysanthemum loding effect