This time I will share jQuery Plugin and tutorial about Minimalist Text Loading Spinner Plugin With jQuery – Spindle, hope it will help you in programming stack.
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.
1 |
< script src = "//code.jquery.com/jquery-2.1.4.min.js" ></ script > |
2 |
< script src = "dist/jquery.spindle.js" ></ script > |
3. Generate a basic text loading indicator that uses character ‘X’ as the loading spinner.
1 |
$( '.demo' ).spindle({text: 'X' }); |
4. You can also append the text loading spinner to an html button as follow.
1 |
$( '.button' ).click( function () { |
2 |
$( this ).spindle({text: '*' }); |
5. Options and defaults.
6. API methods.
2 |
$( '.demo' ).spindle( 'start' ); |
5 |
$( '.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.