Custom Loading Spinner With Sprite Animations - jQuery Preloaders.js

File Size: 157 KB
Views Total: 10314
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Custom Loading Spinner With Sprite Animations - jQuery Preloaders.js

Yet another jQuery plugin for creating sprite sheet based animated loading spinners that can be appended to any elements such as modals, buttons, containers, etc.

How to use it:

1. Add references to jQuery library and the jQuery Preloaders.js script.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous"></script>
<script src="jquery.preloaders.js"></script>

2. The JavaScript to show a basic loading spinner for your ajax loading.

$.preloader.start();

3. Stop/remove the loading spinner manually.

$.preloader.stop();

4. Display the loading spinner in a modal popup.

$.preloader.start({
  modal: true
});

5. Specify the position of the loading spinner..

$.preloader.start({

  // 'center' | 'top-left' | 'top-right' | ' bottom-left' | 'bottom-right' | {top:'200px', left:'200px'}
  position:'center'

});

6. Config the loading spinner and spite animation.

$.preloader.start({

  src : 'sprites.png', 
  width : 32, 
  height : 32, 
  frames : 12

});

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