Custom Loading Spinner With Sprite Animations - jQuery Preloaders.js

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

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.