spin.jsが簡単便利だから使ってみた

//スピナーオブジェクト
var spinner = null;
//表示先
var target = null;
//状態
var state = false;
$(function() {
	init();
	$('#spin-button').click(function() {
		if(!state) {
			spinner.spin(target);
			state = true;
		} else {
			spinner.stop();
			state = false;
		}

	});
});
function init() {
	var opts = {
	  lines: 13, // The number of lines to draw
	  length: 33, // The length of each line
	  width: 11, // The line thickness
	  radius: 16, // The radius of the inner circle
	  corners: 1, // Corner roundness (0..1)
	  rotate: 74, // The rotation offset
	  direction: 1, // 1: clockwise, -1: counterclockwise
	  color: '#000', // #rgb or #rrggbb or array of colors
	  speed: 1.5, // Rounds per second
	  trail: 71, // Afterglow percentage
	  shadow: true, // Whether to render a shadow
	  hwaccel: true, // 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: '30%' // Left position relative to parent
	};
	target = document.getElementById('spin-area');
	spinner = new Spinner(opts);
}