Minimalist Text Loading Spinner Plugin With jQuery - Spindle

Spindle is an extremely lightweight jQuery plugin that allows to use any character as an animated spinner for indicating loading progress (e.g. AJAX request). The plugin takes advantage of CSS3 transforms and @keyframes to animate character of your choice to create a custom text or button loader for your web application.

Basic usage:

1. Include the jQuery Spindle plugin's stylesheet in the head section of the document.

<link href="dist/jquery.spindle.css" rel="stylesheet">

2. Include the jQuery Spindle plugin's JavaScript file after JQuery library but before you close the body tag.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="dist/jquery.spindle.js"></script>

3. Generate a basic text loading indicator that uses character 'X' as the loading spinner.

$('.demo').spindle({text: 'X'});

4. You can also append the text loading spinner to an html button as follow.

$('.button').click(function() {
  $(this).spindle({text: '*'});
});

5. Options and defaults.

$('.demo').spindle({
  text: 'Z',
  css: {
    paddingRight: '5px'
  }
});

6. API methods.

// start the loading animation
$('.demo').spindle('start');

// stop the loading animation
$('.demo').spindle('stop');

Change log:

2015-12-11

• feature: Honor data-spindle-text attribute

---

This awesome jQuery plugin is developed by jtrussell. For more Advanced Usages, please check the demo page or visit the official website.