jQuery Spin

Spin is a jQuery plugin that creates animated loading indicators with only CSS and JavaScript.

Example

Installation

To install download one of these packages and include the jquery.spin.js and jquery.spin.css files in your head with the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascript/jquery.spin.js" type="text/javascript"></script>
<link href="stylesheets/jquery.spin.css" rel="stylesheet" type="text/css" />

Example

Setting up a spinner is simple. The following snippet is all that is needed:

<div class="spin" data-spin />

To add spinners manually try:

$('.spin').spin();
$('.spin').spin('show');
$('.spin').spin('hide');

Styling

Theming a spinner is easy:

.spin
{
  background: #444; /* outline */
  > *
  {
    background: #EEE; /* hand */
  }
}

GitHub Google Twitter