Ajax loaded Chrysanthemum loding effect _ajax related

When Ajax asynchronous requests are made, a dynamic GIF image is typically used to create an AJAX Loading to increase the user experience.

Here we use Spin.js, the JS script compressed after 5k, you can create an AJAX Loading indicator without any pictures, any external CSS styles.

Spin.js's online design, demo and download address are: http://fgnass.github.io/spin.js/

We can in the link page, the dynamic set style will also automatically generate a 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:

<script type= "Text/javascript" src= "zepto.min.js" ></script> <script type= "Text/javascript" Spin.min.js "></script> <script type=" Text/javascript ">//The first parameter is loaded for the loading icon, the second is the Ajax data interface,
The third is a callback function.
 function Loadajaxspin (Ele, Get_url, callback) {var opts = {lines:13,//number of Petals length:20,//Petal length width:10,//Petal width
 RADIUS:30,//Petals from center radius scale:1, corners:1,//Petal smoothness (0-1) color: ' #000 ',///Petals color opacity:0.25, rotate:0,//Petal rotation angle Direction:1,//Petal rotation Direction 1: Clockwise,-1: Counterclockwise speed:1,//petal rotation speed trail:60,//petal rotation (%) zindex:2e9,//Spinner Z axis (default is 2000000000) ClassName: ' Spinner ',//spinner CSS style name top: ' 50% ',//spinner relative to parent container top positioning unit px Left: ' 50% ',///Spinner
Relative to the parent container left locating unit px shadow:false,//Petals showing shadow Hwaccel:false,//spinner enable hardware acceleration and high-speed rotation position: ' absolute '};
var spinner = new Spinner (opts);
$ (ele). Show ();
var target = $ (ele) [0];
Spinner.spin (target); $.ajax ({url:get_url, DataType: ' HTML ', success:function (data) {SPINNER.SPin ();
$ (ele). Hide ();
callback (data); var foo = function (data) {Console.log (data);} $ (function () {$ (' #btnRequest '). On (' click ', Function () {LOADAJAXSP
In ('. Spin ', ' http://192.168.1.191/h5/font.html ', foo);
});
}); </script> <div class= "spin" ></div> <div> <input id= "btnrequest" type= "button" value= "Request Data" /> </div>

In the example above, we write a function Loadajaxspin, the function is the AJAX call before the beginning of the loading icon, the data load completed after the loading icon disappeared

Effect: Click to display the chrysanthemum and then execute the callback function.