JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fgnass.github.com/spin.js/spin.js"></script>
<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>
CSS
#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;
}
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);
});
});