Easy Top Loading Bar Plugin For jQuery - loadBar

File Size: 4.85 KB
Views Total: 2887
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Top Loading Bar Plugin For jQuery - loadBar

loadBar is a lightweight (2kb minified) jQuery plugin used to display an HTML5 canvas based top loading indicator when some content is being loaded.

How to use it:

1. Include both jQuery (slim build) and jQuery loadBar plugin's script in your html page.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.loadBar.js"></script>

2. The JavaScript to show the loading bar.


3. The JavaScript to hide the loading bar.


4. Customize the top loading bar as this:

// main color
loadBar.mainColor = 'red';  

// strip color
loadBar.stripColor = 'green';  

// animation speed
loadBar.barSpeed = 5; 

// bar height
loadBar.barHeight = 5;

Change log:


This awesome jQuery plugin is developed by yoannes. For more Advanced Usages, please check the demo page or visit the official website.