읽 을 때의 동그라미 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 프로 세 스 종료, 동그라미 사라 짐