How can I create a progress bar with percentage?

Question

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?

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, Jan 31 '12 at 03:28

score 1 · Answer 1 · answered Jan 31 '12 at 01:04

1

You could just use the jQuery UI Progress Bar

answered Jan 31 '12 at 01:04

Gabe

49,577
28
142
181

i'm looking for how to get the actual percentage – Cameron Jan 31 '12 at 01:16
1

this isn't like flash that we get the `bytesTotal` and `bytesLoaded` http://stackoverflow.com/questions/399641/ajax-page-download-progress. ajax only has status codes http://www.ibm.com/developerworks/web/library/wa-ajaxintro3/ the only way you can calculate in percentage is how many images have loaded over the total images. if you load 5 images and count every time each is loaded, you get 20%.. 40%.. 60%.. 80%.. 100% and not 0-100 in 100 increments. – Joseph Jan 31 '12 at 03:31

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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();
    }
});

score 0 · Answer 3 · answered Jan 31 '12 at 01:10

0

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

answered Jan 31 '12 at 01:10

tekknolagi

10,663
24
75
119

score 0 · Answer 4 · answered Jan 31 '12 at 01:57

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].complete) {
      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 == "complete" || document.readyState == "complete") {
    doneyet = 1
  }
}
function saydone() {
  doneyet = 1
}
setTimeout("saydone();", wait);
setup_bar();
progress_bar();

How can I create a progress bar with percentage?

4 Answers4

jsBin demo