What is jquery.preloaders.js

jquery.preloaders.js is a lightweight jQuery plugin that helps you create an animated spinner while the ajax content is loading.

Check out the Demo

Install by Bower

jquery.preloaders.js is available as a Bower package. Just run

bower install jquery.preloaders.js

1. Include Folowing Libraries

JQuery reference and the jquery.preloaders.js

<script src="https://code.jquery.com/jquery-3.3.1.min.js">
<script src="bower_components/jquery.preloaders.js/jquery.preloaders.min.js">
 

2. Basic Initialize

Start loading

     <script type="text/javascript">         $.preloader.start({modal: true});     </script>  

Stop loading

     <script type="text/javascript">         $.preloader.stop();     </script>  

3. Others Options

     <script type="text/javascript">         var e = $('#loader').preloader({src:'sprites.png', frames:8, width:64, height:64, speed:9, className: 'mycss'}); // src: (in js/jquery/preloaders/img path)         // var e = $('#loader').preloader('stop');     </script>       <script type="text/javascript">         $.preloader.start({modal: true, position:'top-right'}); // position: [(default:'center') | 'top-left' | 'top-right' | ' bottom-left' | 'bottom-right' | {top:'200px', left:'200px'}]         // $.preloader.stop();     </script>       <script type="text/javascript">         var e = $('<div/>').css('margin', '0 auto').insertAfter($('#conteiner')).preloader(); // center into a 'container'         // e.preloader('stop');     </script>       <script type="text/javascript">         var e = $('<div/>').css({'margin-left': '8px', 'display': 'inline-block', 'vertical-align': 'middle'}).insertAfter($('#button')).preloader({src:'sprites.32.png'});   // next to a 'button'         // e.preloader('stop');     </script>