CODEWITHSUNDEEP
javascriptjqueryhtml
Ankur Chachra
Ankur Chachra

Reputation: 131

Load a progress bar before the page loads

I have a basic login page that sends username and password to the database and if the validation is successful, home page is displayed. The trouble I am facing is that there's a lot of data that is being fetched from the database in this process for displaying the home page. Hence, the page load takes around 10 seconds. Is there a way to display a loading progress bar or something for the time that the page loads? Currently I am using

<script>
    $(window).load(function(){
        $('#dvLoading').fadeOut(4000);
    }); 
</script>

where dvLoading is a simple progress bar gif. This works. However, the problem is that this progress bar displays AFTER the page is loaded. So, this doesn't quite solve the purpose for me. How can I display it as soon as I send the username and password to database? Any help regarding this would be very helpful. Thanks for your time.

Upvotes: 2

Views: 3007

Answers (3)

Ben Muircroft
Ben Muircroft

Reputation: 3034

I have a web sockets app that had the same issue so i made a tidy load bar...

HTML

<div id="loaderbar"style="position:absolute;top:56px;width:930px;margin-left:auto;margin-right:auto;height:10px;">
    <div id="LOADER"style="background:#E55757;height:10px;width:0px;position:relative;top:0px;left:0px;"max="930"></div>
</div>

Javascript

var MAXL=0; //MAXL is how many times do you want to see the load bar move to show progress

var LEVENTS=9;

MAXL=parseInt($('#LOADER').attr('max'))/(LEVENTS);

$('#LOADER').animate({width:$('#LOADER').width()+MAXL+'px'}); // drop this line in when ever a stage of progress happens... Should be the same amount of times as LEVENTS

Upvotes: 0

anar khalilov
anar khalilov

Reputation: 17498

Can you try this?

<script>
  $(document).ready(function(){
     $('#dvLoading').show();
  });

  $(window).load(function(){
     $('#dvLoading').fadeOut(4000);
  }); 
</script>

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

Try this:

// jQuery Plugin and calling function in page load
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#pageloaddiv").fadeOut(2000);
});

$('submitbuttonselector').bind('click',function(){
 $("#pageloaddiv").fadeIn(500);//show loading div on submit of username and password
})
</script>

// CSS Class
<style type="text/css">
#pageloaddiv {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url('http://4.bp.blogspot.com/-hO_3iF0kUXc/Ui_Qa3obNpI/AAAAAAAAFNs/ZP-S8qyUTiY/s1600/pageloader.gif') no-repeat center center;
}
</style>

// loading div to show loading image
<div id="pageloaddiv"></div>

Upvotes: 0

Related Questions