画读取时的圈圈 spin.js

http://spin.js.org/

https://github.com/fgnass/spin.js

这个类库用CSS动画来画圈圈,不需要jquery也不需要gif图片

选他是因为需要一个前台运算时不会停顿的圈圈

//loading圈圈设置
var loadingOpts = {
	lines: 12, // The number of lines to draw
	length: 5, // The length of each line
	width: 4, // The line thickness
	radius: 10, // The radius of the inner circle
	corners: 1, // Corner roundness (0..1)
	rotate: 0, // The rotation offset
	direction: 1, // 1: clockwise, -1: counterclockwise
	color: '#0080C1', // #rgb or #rrggbb or array of colors
	speed: 0.5, // Rounds per second
	trail: 60, // Afterglow percentage
	shadow: false, // Whether to render a shadow
	hwaccel: false, // Whether to use hardware acceleration
	className: 'spinner', // The CSS class to assign to the spinner
	zIndex: 2e9, // The z-index (defaults to 2000000000)
	top: '50%', // Top position relative to parent
	left: '50%' // Left position relative to parent
};

var target = document.getElementById('page_wrapper');
var spinner;//spinner = new Spinner(loadingOpts).spin(target);画圈圈spinner.stop()让圈圈消失

使用的话配套使用setTimeout(function(){......}, 0);

setTimeout是把function里的进程添加在当前进程的后方

把显示圆圈之后的处理封装起来(spinner.stop()应该出现在这里function的最下方)

例如:

spinner = new Spinner(loadingOpts).spin(target);
setTimeout(function(){
	for(var i=0;i<100000000;i++){};
	spinner.stop()
})

原理上是:

1,添加圈圈

2,处理轻量级的任务(不会卡的,一瞬间的)

3,setTimeout外面的进程完成,圈圈开始转

4,处理setTimeout的进程(繁重的,会卡的),圈圈依旧在转

5,setTimeout的进程结束,圈圈消失