I want to create a progress bar with jquery or javascript that finds the percentage while loading the javascript. All the images are loaded in the javascript, they use the jquery append tag and so I want to load all these images with a screen that is shown with a loading bar based on percentage of how much of the data has been loaded. What is the best way to do this?

I want to create a progress bar with jquery or javascript that finds the percentage while loading the javascript. All the images are loaded in the javascript, they use the jquery append tag and so I want to load all these images with a screen that is shown with a loading bar based on percentage of how much of the data has been loaded. What is the best way to do this?

• javascript
• jquery

Share Improve this question Follow asked Jan 31, 2012 at 1:02 CameronCameron 1,02111 gold badge1010 silver badges2121 bronze badges 1

• You might get a better answer if you just asked how to get the current progress of loading an image and omitted the progress bar mentions. – icktoofay Commented Jan 31, 2012 at 3:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

jsBin demo

var images = [
  'img1.jpg',
  'img2.jpg',
  'img3.jpg',
  'img4.jpg'
];

var imagesN = images.length;
var i = 0;

var img = new Image();
img.onload = (function(){
    for ( i = 0; i < imagesN; ++i ){
        $('#gallery').append('<img src="'+images[i]+'">');   
    }
})(i); 

var c = 0;
$("#gallery img").load(function(i){
    c++;
    var status = c*(100/imagesN)+'%';
    $("#load_status").html(status); 
    $('#loader').stop().animate({width: status},300);
    if (c === imagesN){
           $("#gallery").fadeIn(700);
       $('#load_status, #loading_bar').hide();
    }
});

You could just use the jQuery UI Progress Bar

Parent div with expanding child span for progress. Also, as you haven't provided any code, neither have I.

here is the demo

var bar_length = 300;
var bar_height = 30;
var bar_color = "red";
var bar_background = "white";
var bar_border = "blue";
var window_background = "black";
var window_border = "blue";
var text_color = "blue";
var display_close_button = 1;
var wait = 5E3;
var more = 0;
var doneyet = 0;
function setup_bar() {
  window_width = bar_length + 50;
  window_height = bar_height + 50;
  if(document.all) {
    bar_height2 = bar_height - 2;
    bar_width2 = bar_length + 3
  }else {
    bar_height2 = bar_height;
    bar_width2 = bar_length + 1
  }
  document.write('<div id="bar_window" style="position: absolute;' + "top: " + (screen.height - window_height) / 2 + "px" + ";left: " + (screen.width - window_width) / 2 + "px" + ";border: 2px solid " + window_border + ";background-color: " + window_background + ";width: " + window_width + "px" + ";height: " + window_height + "px" + ";color: " + text_color + ';" onClick="close_bar()">');
  if(display_close_button) {
    document.write('<div style="position=absolute;' + "top: 0" + "px" + ";left: 0" + "px" + ";width: " + (window_width - 3) + "px" + ";background-color: " + window_background + ";color: " + text_color + ";text-align: right" + ';">');
    document.write("[X]</div>")
  }
  document.write('<div id="empty_bar" style="position: absolute;' + "top: " + 25 + "px" + ";left: " + 25 + "px" + ";border: 1px solid " + bar_border + ";background-color: " + bar_background + ";width: " + bar_width2 + "px" + ";height: " + bar_height + "px" + ';">');
  document.write("</div>");
  document.write('<div id="bar" style="position: absolute;' + "top: " + 26 + "px" + ";left: " + 26 + "px" + ";background-color: " + bar_color + ";width: " + 0 + "px" + ";max-width: " + bar_width2 + "px" + ";height: " + bar_height2 + "px" + ';">');
  document.write("</div>");
  document.write('<div id="percent" style="position: absolute;' + "top: " + 25 + "px" + ";width: " + window_width + "px" + ";text-align: center" + ";vertical-align: middle" + ";color: " + text_color + ";font-size: " + bar_height + "px" + ';">');
  document.write("0%");
  document.write("</div>");
  document.write("</div>")
}
function progress_bar() {
  var image_count = document.getElementsByTagName("img").length;
  var image_array = document.getElementsByTagName("img");
  var bar_part = Math.round(bar_length / image_count);
  var bar_perc = Math.round(100 / image_count);
  var new_width = 0;
  var j = 0;
  var percent = 0;
  for(var i = 0;i < image_count;i++) {
    if(image_array[i].plete) {
      percent = percent + bar_perc;
      new_width = new_width + bar_part;
      j++
    }
  }
  if(new_width <= parseFloat(document.getElementById("bar").style.width) && new_width < j * bar_part + bar_part) {
    more = more + 0.5;
    new_width = new_width + Math.round(more);
    percent = percent + Math.round(more)
  }else {
    more = 0
  }
  if(percent > 100) {
    percent = 100
  }
  document.getElementById("percent").innerHTML = percent + "%";
  document.getElementById("bar").style.width = new_width + "px";
  if(j < image_count || j == 0 || doneyet == 0) {
    setTimeout("progress_bar();", 500)
  }else {
    setTimeout("close_bar();", 500)
  }
}
function close_bar() {
  document.getElementById("bar_window").style.visibility = "hidden"
}
if(document.readyState) {
  document.onreadystatechange = checkstate
}else {
  if(document.addEventListener) {
    document.addEventListener("DOMContentLoaded", saydone, false)
  }
}
function checkstate() {
  if(document.readyState == "plete" || document.readyState == "plete") {
    doneyet = 1
  }
}
function saydone() {
  doneyet = 1
}
setTimeout("saydone();", wait);
setup_bar();
progress_bar();