YolProg, the Yola website progress bar loader!

  • 1
  • Praise
  • Updated 7 years ago
I'm glad to release my latest(and most mind tiring with the most bugs to fix) invention for Yola yet, YolProg! YolProg is a JQuery plugin for your site that displays a progress bar with the percentage loaded on top. Since this thing isn't easily customized from the outside, I am just going to give you the code instead of packaging and zipping it. YolProg works by finding all the images on your site, and each time a image loads, it calculates the percentage of images loaded. You can find a standard example Here and a customized example on my website, www.campatet.com
Anyways, without further ado, YolProg.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$.fn.yolprog = function (options) {
var defaults = {
slct:'body'
};
var x=0;
var images= new Array();
var options = $.extend(defaults, options);
return this.each(function () {
$('body').css('overflow','hidden');
$('body').append("<span style='bottom:50%;color:white;left:50%;display:none;position:fixed;z-index:100;' id='yolwel'><h1 style='color:white'>Welcome</h1></span><div id='yolover' style='top:0px;left:0px;height:100%;background:black;width:100%;z-index:99;position:fixed;'></div>");
$('body').append("<div id='yolloading' style='width:100%;left:0px;position:fixed;z-index:100;height:5px;top:50%;background:transparent;border-style:none;'><span id='yolperc' style='left:50%;position:absolute;top:-30px;color:white;'>0%</span><div id='yolprogress' style='left:0px;width:10px;height:100%;background:white;position:absolute;'></div>");
var o=options;
var loadimg=function(){
var currentimg=images[x];
var desload=$("<img src='"+currentimg+"'/>");
$(desload).load(function(){
var perc=(x+1)/images.length*100;
var percent=perc+"%";
var disperc=Math.round(perc)+"%";
$('#yolperc').text(disperc);
if (perc< 100) {
$('#yolloading #yolprogress').stop().animate({'width':percent},1000);
x++;
loadimg();
}
else{
$('#yolloading #yolprogress').stop().animate({'width':percent},1000);
}
});
}
$(o.slct).find('img').each(function () {
images.push(this.src);
});
loadimg();
$(window).load(function(){
$('#yolloading').delay(700).fadeOut(1000, 'linear');
$('#yolwel').delay(700).fadeIn(1000).delay(1000).fadeOut(500);
$('#yolover').delay(3000).animate({'opacity':'hide','height':'hide'},1000);
$('body,html').delay(3000).css('overflow','auto').animate({scrollTop: 0}, 1000);

});
});
};
})(jQuery);
$(document).ready(function(){
$('body').yolprog();
});
</script>

Sincerely,
Kevin
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
  • really really really happy!

Posted 7 years ago

  • 1
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Very good Kevin!

I shall look at incorporating this into one of my sites soon!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Thanks Andi!

Kevin
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Hey everyone! I just made an update for this that automatically changes the percent to 100% after it has loaded! The updated code is here:


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

<script type="text/javascript">

(function($){

$.fn.yolprog = function (options) {

var defaults = {

slct:'body'

};

var x=0;

var images= new Array();

var options = $.extend(defaults, options);

return this.each(function () {

$('body').css('overflow','hidden');

$('body').append("<span style='bottom:50%;color:white;left:50%;display:none;position:fixed;z-index:100;' id='yolwel'><h1 style='color:white'>Welcome</h1></span><div id='yolover' style='top:0px;left:0px;height:100%;background:black;width:100%;z-index:99;position:fixed;'></div>");

$('body').append("<div id='yolloading' style='width:100%;left:0px;position:fixed;z-index:100;height:5px;top:50%;background:transparent;border-style:none;'><span id='yolperc' style='left:50%;position:absolute;top:-30px;color:white;'>0%</span><div id='yolprogress' style='left:0px;width:10px;height:100%;background:white;position:absolute;'></div>");

var o=options;

var loadimg=function(){

var currentimg=images[x];

var desload=$("<img src='"+currentimg+"'/>");

$(desload).load(function(){

var perc=(x+1)/images.length*100;

var percent=perc+"%";

var disperc=Math.round(perc)+"%";

$('#yolperc').text(disperc);

if (perc< 100) {

$('#yolloading #yolprogress').stop().animate({'width':percent},1000);

x++;

loadimg();

}

else{

$('#yolloading #yolprogress').stop().animate({'width':percent},1000);

}

});

}

$('body').find('img').each(function () {

images.push(this.src);

});

loadimg();

$(window).load(function(){

x=images.length-1;
loadimg();
$('#yolloading').delay(700).fadeOut(1000, 'linear');

$('#yolwel').delay(700).fadeIn(1000).delay(1000).fadeOut(500);

$('#yolover').delay(3000).animate({'opacity':'hide','height':'hide'},1000);

$('body,html').delay(3000).css('overflow','auto').animate({scrollTop: 0}, 1000);


});

});

};

})(jQuery);

$(document).ready(function(){

$('body').yolprog();

});

</script>


Sincerely,

Kevin
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Awesome job Kevin! This is great! :)

I'll be putting this onto some of my sites. ;)

Kind Regards,
Nathan