I did a Google search and I cannot find a way to do a loading with percentage. Anyone know how I can find an example of that?
I need a preload for a website from 0-100 without bar, before show the content, but I cannot find any example.
If you mean you want to show the content only when it is fully loaded, you may try following two options:
1) wrap all content inside a <div id=wrapper style=display:none;></div> tag and on load complete event show it like this:
$(function(){
$(#wrapper).show();
});
2) If this still does not solves your purpose, you can load empty page and fetch content using ajax:
$(function(){
$.ajax({
.......//AJAX params
.......
success:function(msg){
$(#wrapper).html(msg);//DO NEEDFUL WITH THE RETURNED VALUE
});
});
EDIT: Using queryLoader script provided by gayadesign I was able to achieve some success :D
I had to made some changes to the queryLoader.js file from line 127 to 151. The changed script is as follows. Try it yourself.
$(QueryLoader.loadBar).css({
position: relative,
top: 50%,
font-size:40px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
});
},
animateLoader: function() {
var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
if (perc > 99) {
$(QueryLoader.loadBar).stop().animate({
width: perc + %
}, 5000, linear, function() {
$(this).html(<strong>100%</strong>);//MY EDIT
QueryLoader.doneLoad();
});
} else {
$(QueryLoader.loadBar).stop().animate({
width: perc + %
}, 5000, linear, function() {
//MY EDIT
$(this).html(<strong>+Math.round(perc)+%</strong>);
});
}
},
