Sunday, 18 August 2013

Changing a jQuery loading bar so it doesn't redirect (Similar to Youtube new loading bar)

Changing a jQuery loading bar so it doesn't redirect (Similar to Youtube
new loading bar)

I have this loading bar that is a Jquery Plugin that is available here:
http://www.jqueryscript.net/loading/Smooth-Progress-Bar-Loading-Effect-With-jQuery.html
However, the bar works on a redirect instead of displaying what actually
loads. When the below code from $(this).children().html ... is in place, I
see the progress bar in my Inspect Element tab go from 0% - 100%. Which is
great as it loads, But I want the page to stay current and to load what
ever other page is clicked, once the bar is at 100% instead.
Kind of similar to the new youtube red pre-loader. Pretty sure this script
is capable of this but after hours of tweaking and attempting changes, I
can't seem to work out how.
I'm a PHP head and new jQuery :/
<script type='text/javascript'>
function loading(percent){
$('.progress span').animate({width:percent},1000,function(){
$(this).children().html(percent);
if(percent=='100%'){
$(this).children().html('Loading Complete, Redirect to
Home Page...&nbsp;&nbsp;&nbsp;&nbsp;');
setTimeout(function(){
$('.container').fadeOut();
location.href="http://www.jqueryscript.net";
},1000);
}
})
}
</script>

No comments:

Post a Comment