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.

loadBar.trigger('show');

3. The JavaScript to hide the loading bar.

loadBar.trigger('hide')

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:

2017-10-31

• JS & CSS update

---

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