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>