Custom Loading Spinner With Sprite Animations - jQuery Preloaders.js

Custom Loading Spinner With Sprite Animations - jQuery Preloaders.js

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

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.

  • Publication date: 27.02.2018
  • Source