Javascript Loading Bar

how would I make a loading bar, I would also like it to be 'stackable' like have 2 on the same page and have the first one trigger the second one when its complete then the second

Solution 1:

OK, let's expand the code I gave you in the last question by grouping it into functions and introducing callbacks:

function buildBar(id, callback) {
  var currentAdb = 0;
  var imgCtb = 25;

  function cycleb() {
    var output = '[';
    for (var i = 0; i < imgCtb; i++) {
      output += i > currentAdb ? '&nbsp;' : '/';
    }
    output += ']';
    document.getElementById(id).innerHTML = output;
    ++currentAdb;
    if (currentAdb == imgCtb) {
      window.clearInterval(myInterval);
      if (typeof callback == 'function') {
        callback();
      }
    }
  }
  var myInterval = window.setInterval(cycleb, 500);
}

function callback1() {
  buildBar('adLinkb2', callback2);
}

function callback2() {
  //window.location... stuff here
  alert('redirect should go here');
}

buildBar('adLinkb', callback1);

#adLinkb,
#adLinkb2 {
  font-size: 12px;
  color: #000;
  font-family: monospace;
}

<div id="adLinkb"></div>
<div id="adLinkb2"></div>