jQuery Slim Pre-Loading Bar Plugin - Loadie.js

Loadie.js is a lightweight and stylish jQuery loader plugin that displays a slim progress bar (loading bar) at the top of your webpage (or anywhere as you wish) for showing pre-loading status. Good for rich content website which contains lots of large images.

See also:

• Google Like jQuery Slim Progress Bar Plugin - NProgress
• jQuery Youtube Like Ajax Progress Bar Plugin - ytLoad

Basic Usage:

1. Include jQuery library and jquery.loadie.js script on your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.loadie.js"></script>

2. The CSS for the progress bar

.loadie {
position: absolute;
top: 0;
left: 0;
background-color: #000;
width: 0;
height: 4px;
-webkit-transition: width 0.5s ease-out;
box-shadow: 0px 1px 5px rgba(0,0,0,0.25);
}

3. Create the html elements you want to pre-load

<img src="img/1.jpg" class="loaded-image" alt=""> 
<img src="img/2.jpg" class="loaded-image" alt=""> 
<img src="img/3.jpg" class="loaded-image" alt=""> 

4. The javascript.

<script>
$(function() {
var totalImages = $(".loaded-image").size();
var imagesLoaded = 0;
$('body').loadie();
$(".loaded-image").bind("load", function(){
$(this).show();

imagesLoaded++;
$('body').loadie(imagesLoaded / totalImages);
});
})
</script>

---

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