bkono/spin-js-example.html

## spin-js-example.html
<!doctype html>
<head>
	<title>Hi</title>
	<style>
	#spin {
		background: #333;
		color: white;
		float: left;
		width: 200px;
		height: 200px;
		margin: 0 20px 20px 0;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
}
	</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://fgnass.github.com/spin.js/spin.js"></script>
	<script type="text/javascript">
		$.fn.spin = function(opts) {
			this.each(function() {
				var $this = $(this),
					spinner = $this.data('spinner');

				if (spinner) spinner.stop();
				if (opts !== false) {
				  opts = $.extend({color: $this.css('color')}, opts);
				  spinner = new Spinner(opts).spin(this);
				  $this.data('spinner', spinner);
				}
			});
			return this;
		};
		$(function() {
			$(".spinner-link").click(function(e) {
				e.preventDefault();
				$(this).hide();
				var opts = {
				  lines: 12, // The number of lines to draw
				  length: 7, // The length of each line
				  width: 5, // The line thickness
				  radius: 10, // The radius of the inner circle
				  color: '#fff', // #rbg or #rrggbb
				  speed: 1, // Rounds per second
				  trail: 66, // Afterglow percentage
				  shadow: true // Whether to render a shadow
				};
				$("#spin").show().spin(opts);


			});
		});
	</script>
</head>
<body>
	<div id="container">
		<h1>Hi. Click the link below to show a slick spinner.</h1>
		<div id="link">
			<a href="#" class="spinner-link">Some random ajax action</a>
			<div id="spin" style="display:none;"></div>
		</div>
	</div>
</body>
	<!doctype html>
	<head>
	<title>Hi</title>
	<style>
	#spin {
	background: #333;
	color: white;
	float: left;
	width: 200px;
	height: 200px;
	margin: 0 20px 20px 0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}
	</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://fgnass.github.com/spin.js/spin.js"></script>
	<script type="text/javascript">
	$.fn.spin = function(opts) {
	this.each(function() {
	var $this = $(this),
	spinner = $this.data('spinner');

	if (spinner) spinner.stop();
	if (opts !== false) {
	opts = $.extend({color: $this.css('color')}, opts);
	spinner = new Spinner(opts).spin(this);
	$this.data('spinner', spinner);
	}
	});
	return this;
	};
	$(function() {
	$(".spinner-link").click(function(e) {
	e.preventDefault();
	$(this).hide();
	var opts = {
	lines: 12, // The number of lines to draw
	length: 7, // The length of each line
	width: 5, // The line thickness
	radius: 10, // The radius of the inner circle
	color: '#fff', // #rbg or #rrggbb
	speed: 1, // Rounds per second
	trail: 66, // Afterglow percentage
	shadow: true // Whether to render a shadow
	};
	$("#spin").show().spin(opts);



	});
	});
	</script>
	</head>
	<body>
	<div id="container">
	<h1>Hi. Click the link below to show a slick spinner.</h1>
	<div id="link">
	<a href="#" class="spinner-link">Some random ajax action</a>
	<div id="spin" style="display:none;"></div>
	</div>
	</div>
	</body>