title: Javascript to update progress bar, then switch visible div's
body: <p>I have a page which is being generated through PHP web scraping. As the collection of the content causes a delay, I am trying to introduce a bootstrap progress bar whilst the loading is happening.</p>
  
  <p>I am not linking the bar into any actual loading stages, I'm just running it for 3 seconds and then getting the code to hide/show the relevant div's (the first div contains the loading bar, the second contains the content).</p>
  
  <p>I have the following code but the php-content div is appearing instantly rather than delaying. There is no output to the javascript console in chrome.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $("#loader").show();
          $("#php-content").hide();
          counter = 0;
          run();
      });
  
      function update(value) {
          $("#loadingBar").attr("style","width:"+value+"%");
          $("#loadingBar").attr("aria-valuenow",value);
      }
  
      function run() {
          if (counter &lt;= 3000) {
              update(counter);
              counter+=10;
              setTimeout(run(), 10);
          } else {
              $("#loader").hide();
              $("#php-content").show();
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>And the HTML section:</p>
  
  <pre><code>&lt;div id="loader"&gt;
                  &lt;div class="progress"&gt;
                      &lt;div id="loadingBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="3000" style="width: 0%"&gt;
                          &lt;span class="sr-only"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="php-content"&gt;
                  &lt;h2&gt;Current Weather Conditions:&lt;/h2&gt;
                  &lt;table class="table table-bordered"&gt;
                      &lt;?php include 'php/scrape.php' ?&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>UPDATE - Please see my Answer below. I found a solution after posting this question.</p>