Home > Developer > Web Develop
Ajax asynchronous request, generally use a dynamic GIF small image to make an Ajax Loading, in order to increase the user experience.
Here we can 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/
We can set the style dynamically in the link page, and the configuration script of the style will be generated automatically:
Once set, we need to configure the style:
First, show chrysanthemum loading
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script src= "Spin.min.js" ></script>
<body>
<div id= "Loading" ></div>
<script>
var opts = {
LINES:13//The number of lines to draw
, length:28//The length of each line
, width:14//the line thickness
, radius:42//The radius of the inner circle
, Scale:1//Scales overall size of the spinner
, corners:1//Corner roundness (0..1)
, color: ' #000 '//#rgb or #rrggbb or array of colors
, opacity:0.25//opacity of the lines
, rotate:0//the rotation offset
, Direction:1//1:clockwise, -1:counterclockwise
, Speed:1//Rounds per second
, trail:60//Afterglow percentage
, fps:20//Frames per second when using SetTimeout () as a fallback for CSS
, Zindex:2e9//The Z-index (defaults to 2000000000)
, ClassName: ' Spinner '//the CSS class to assign to the spinner
, top: ' 50% '//top position relative to Parent
, left: ' 50% '//left position relative to parent
, Shadow:false//Whether to render a shadow
, Hwaccel:false//Whether to use hardware acceleration
, Position: ' absolute '//Element positioning
}
var target = document.getElementById (' Loading ')
var spinner = new Spinner (opts). Spin (target);
Hide Spinner
Spinner.spin ();
</script>
</body>
Second, Ajax loading chrysanthemum loading effect
The Loadajaxspin function is the loading icon that appears before the Ajax call starts, and the loading icon disappears after the data is loaded.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script src= "Spin.min.js" ></script>
<script src= "Jquery-1.10.2.js" ></script>
<body>
<div class= "Spin" ></div>
<input type= "button" id= "Btnrequest" value= "Request Data"/>
<script>
The first parameter is the label loaded by the loading icon, the second is the Ajax data interface, and the third is the 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 ',//Petal 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,//trailing of petals when rotated (percent)
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 parent container left positioning unit px
Shadow:false,//Petals show Shadow
Hwaccel:false,//spinner whether hardware acceleration and high speed rotation are enabled
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) {
Hidden Chrysanthemum
Spinner.spin ();
$ (ele). Hide ();
callback (data);
}
})
}
var foo=function (data) {
Console.log (data);
}
$ (function () {
$ (' #btnRequest '). On (' click ', function () {
Loadajaxspin ('. Spin ', ' http://192.168.1.191/h5/font.html ', foo);
})
})
</script>
</body>
The effect of the above code: after the click to show the Chrysanthemum, and so on after the Ajax loading successful chrysanthemum hidden, execute callback function.
Reference Original: http://www.cnblogs.com/woodk/p/5364995.html
Ajax Loading Chrysanthemum Loading effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
