A very easy way to create a progress bar when your webpage is loading. The loading bar is like youtube’s loading bar. The only you want is to add a very simple Jquery script and a a css for that reason. You can find it loading in my site. http://www.boursinos.gr.

cover-photo

The css you need is the following

/*********************************************************************************/
/* Progress Bar */
/*********************************************************************************/
#progressBar {
position: fixed;
z-index: 999999;
top: 0; /* fixed to the top */
left: 0;
width: 0%;
height: 10px; /*here you can change the height of the bar */
background: #b91f1f; /* the color of the bar */
border-radius: 10%;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progressBar:before {
position: absolute;
content: ”;
top: 0;
opacity: 1;
width: 10%;
right: 0px;
height: 2px;
box-shadow: #b91f1f 1px 0 6px 2px;
border-radius: 50%;
}

And here it is the JQuery and javascript script, that reads the media files that you have in your page that needs time to download and it creates the percentage of the bar

$(document).ready(function () {

var lodedSize = 0;
var number_of_media = $(“body img”).length;

doProgress();

// function for the progress bar
function doProgress() {
$(“img”).load(function() {
lodedSize++;
var newWidthPercentage = (lodedSize / number_of_media) * 100;
animateLoader(newWidthPercentage + ‘%’);
})
}

//Animate the loader
function animateLoader(newWidth) {
$(“#progressBar”).width(newWidth);
if(lodedSize>=number_of_media){
setTimeout(function(){
$(“#progressBar”).animate({opacity:0});
},700);
}
}

});

Feel free to comment.

And as i say: Knowledge are for everyone.

cheers