Using Spin.js to Make a Non-Gif Spinner Loading Animation With Javascript

Create a non-gif spinner ajax loading animation. This is a great script. This allows you to easily create a loading spinner on your website without having to worry about creating/downloading a gif. 

You can get the library here:

http://fgnass.github.io/spin.js/

* jQuery is supported but not required.

copy
<script type="text/javascript">
	var spinOptions1 =
	{
		lines: 12, // The number of lines to draw
		length: 15, // The length of each line
		width: 10, // The line thickness
		radius: 30, // The radius of the inner circle
		corners: 1, // Corner roundness (0..1)
		rotate: 0, // The rotation offset
		direction: 1, // 1: clockwise, -1: counterclockwise
		color: '#000', // #rgb or #rrggbb or array of colors
		speed: 1, // 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
		position: 'absolute'
	};
	var spinTarget = document.getElementById('screen');
	var spinner = new Spinner(spinOptions1);

	//*Note: the screen object in this example has a relative position. This allows the spinner to be placed centered within the screen object.
	
	function startSpinner()
	{
		spinner.spin(spinTarget);
	}
		
	function stopSpinner()
	{
		spinner.stop();
	}
</script>

<div id="screen" style="position: relative;">

</div>