A small jQuery loader plug-in as content is loading

Creating a top loading bar

As the content is loading in your web page including images, text etc. you may display a colorful loader on the top bar to let the users know.

For implementing that, you may use a light-weight plugin (loadBar) which is based on jQuery and is quite easy to use.

All you need is to include the jquery.loadBar.min.js or jquery.loadBar.js plug-in file after the reference of the jQuery and simply invoke the loader on the top bar by calling a method.

A demo of jQuery loader with Show/Hide buttons

For demonstrating this nice and light-wight loader plug-in, two buttons are used. The first button (Show) is to invoke or initiate the top loader while the other (Hide) is to hide the loader.

In real time scenarios, you will inittate the plug-in or loader as content is loading. After the complete page or a specified section is loaded you will execute this method:

loadBar.trigger(‘hide’)

For initiating, this method is used:

loadBar.trigger(‘show’);

Have a look at the live demo by clicking the link or image below:

jQuery top loader

See online demo and code

 

The markup for this demo:

 

The script:

 

How to setup this top loader?

For setting up this plug-in in your website, you need to include the jQuery library along with the plug-in JS file:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>

<script src=”js/loadBar/jquery.loadBar.min.js”></script>

Credit and plug-in download: yoannes