How to Show a Running Progress Bar While Page Is Loading

Need to show progress bar while page loads

Have an animated gif show by default, when your graph is done loading then hide it. Does your loading funciton have a function callback option? if it does, do this here.
Otherwise, have the loading icon with a low z-index overlapping your graph, give the graph a higher z-index. vwalah.

If you're tracking % loaded, you can have a setup like so:

<div id='progress-bar-total'>
   <div id='progress-bar-percent'></div>
</div>

Have continuous calls to a function that does something like this:

function updateProgress(bytesRead, bytesTotal){
   var current = (bytesRead/bytesTotal) + "%";
   $("#progress-bar-percent").css("width", current);
}

How to show progress bar until the page completely loads in HTML5/CSS3?

Put a div at the beginning of your page (well this is a spinner and not a loading bar... but...)

    <div id="work-in-progress">
        <div class="work-spinner"></div>
    </div>

then using JQuery bind to the load event... which gets fired when the page is loaded

  $(window).bind("load", function () {
        $('#work-in-progress').fadeOut(100);
    });

and add some css to the div to

#work-in-progress {
  position: fixed;
  width: 100%;
  height: 100%;
  font-size: 150px;
  text-align: center;
  vertical-align: middle;
  color: #000000;
  z-index: 200000;
  background-color: #FFFFFF;
}

.work-spinner {
  background-color: rgba(0,0,0,0);
  border: 9px solid rgba(27,61,226,0.9);
  opacity: .9;
  border-left: 5px solid rgba(0,0,0,0);
  border-radius: 120px;
  -webkit-box-shadow: 0 0 35px #1B3DE2;
  box-shadow: 0 0 35px #1B3DE2;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  -moz-animation: spin .5s infinite linear;
  -webkit-animation: spin .5s infinite linear;
  -o-animation: spin .5s infinite linear;
  animation: spin .5s infinite linear;
}

@-moz-keyframes spin {
 from {
     -moz-transform: rotate(0deg);
 }
 to {
     -moz-transform: rotate(360deg);
 }
}

@-webkit-keyframes spin {
 from {
     -webkit-transform: rotate(0deg);
 }
 to {
     -webkit-transform: rotate(360deg);
 }
}

@keyframes spin {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
}
@-o-keyframes spin {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
}

Display a loading bar before the entire page is loaded

Use a div #overlay with your loading info / .gif that will cover all your page:

<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

jQuery:

$(window).load(function(){
   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();
});

---

Here's an example with a Loading bar:

jsBin demo

;(function(){
  function id(v){ return document.getElementById(v); }
  function loadbar() {
    var ovrl = id("overlay"),
        prog = id("progress"),
        stat = id("progstat"),
        img = document.images,
        c = 0,
        tot = img.length;
    if(tot == 0) return doneLoading();

    function imgLoaded(){
      c += 1;
      var perc = ((100/tot*c) << 0) +"%";
      prog.style.width = perc;
      stat.innerHTML = "Loading "+ perc;
      if(c===tot) return doneLoading();
    }
    function doneLoading(){
      ovrl.style.opacity = 0;
      setTimeout(function(){ 
        ovrl.style.display = "none";
      }, 1200);
    }
    for(var i=0; i<tot; i++) {
      var tImg     = new Image();
      tImg.onload  = imgLoaded;
      tImg.onerror = imgLoaded;
      tImg.src     = img[i].src;
    }    
  }
  document.addEventListener('DOMContentLoaded', loadbar, false);
}());

*{margin:0;}
body{ font: 200 16px/1 sans-serif; }
img{ width:32.2%; }

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;                /* will be increased by JS */
  top:50%;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

<div id="overlay">
  <div id="progstat"></div>
  <div id="progress"></div>
</div>

<div id="container">
  <img src="http://placehold.it/3000x3000/cf5">
</div>

Calculate & Display percentage of progress of page load

function timeout_trigger() {
   $(".progress").css("max-width",p+"%");
   $(".progress-view").text(p+"%");
   if(p!=100) {
       setTimeout('timeout_trigger()', 50);
   }
   p++;
}
timeout_trigger();

This code will work only when you download 1% per 50ms, if download goes faster - if will fail.

It must be something like this:

var size = file.getsize(); // file size

function timeout_trigger() {
   var loaded = file.getLoaded(); // loaded part
   p = parseInt(loaded / size);

   $(".progress").css("max-width",p+"%");
   $(".progress-view").text(p+"%");
   if(p!=100) {
       setTimeout('timeout_trigger()', 20);
   }
}
timeout_trigger();

To realise method getLoaded() you can use AJAX event onprogress (I hope you are loading files async). Check Monitoring Progress part here https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Progress Bar to hide the page in till the page is loaded completely

Three things I have done to make this work: PS, Sorry for poor code blocks, new to all of this.

HTML Div:

<div id ="blocker">
<div>Loading...</div></div>

CSS:

#blocker{position: fixed;

top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1000;  
opacity: 0.3;  
display: none;

}

#blocker div   
    { position: absolute;
    top: 50%;
    left: 50%;
    width: 5em;
    height: 2em;
    margin: -1em 0 0 -2.5em;
    color: #fff;
    font-weight: bold;
}

JQuery before the Ajax gets called:

$("#blocker").show();

    $.ajax`

---

Related Topics