Javascript, чтобы обновить индикатор выполнения, затем переключить видимый div

Question

У меня есть страница, которая генерируется с помощью веб-скрепок PHP. Поскольку сбор содержимого вызывает задержку, я пытаюсь ввести индикатор выполнения загрузки, пока происходит загрузка.

Я не привязываю панель к каким-либо фактическим этапам загрузки, я просто запускаю ее в течение 3 секунд, а затем получаю код, чтобы скрыть/показать соответствующий div (первый div содержит загрузочную панель, второй содержит содержание).

У меня есть следующий код, но div php-content появляется мгновенно, а не задерживается. Нет выхода на консоль javascript в хром.

<script type="text/javascript"> 
    $(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 <= 3000) { 
      update(counter); 
      counter+=10; 
      setTimeout(run(), 10); 
     } else { 
      $("#loader").hide(); 
      $("#php-content").show(); 
     } 

    } 
</script> 

И раздел HTML:

<div id="loader"> 
       <div class="progress"> 
        <div id="loadingBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="3000" style="width: 0%"> 
         <span class="sr-only"></span> 
        </div> 
       </div> 
      </div> 
      <div id="php-content"> 
       <h2>Current Weather Conditions:</h2> 
       <table class="table table-bordered"> 
        <?php include 'php/scrape.php' ?> 
       </table> 
      </div> 

UPDATE - Пожалуйста, смотрите мой ответ ниже. После публикации этого вопроса я нашел решение.

Answer 1

Я нашел решение, основанное на этом учебнике здесь - Animate Progress Bars with Jquery

В принципе, я в конечном итоге просто установив ширину строки прогресса до 100% с помощью функции JQuery в .attr(). Используя правило css, продолжительность перехода может быть установлена ​​на 3 секунды. Все, что должно произойти, - установить тайм-аут в коде, чтобы прекратить делать что-либо еще во время перехода.

Script (поиск аккуратнее, чем раньше):

$(document).ready(function() { 
$("#loader").show(); 
    $("#php-content").hide(); 
    $("#loadingBar").attr("style", "width:100%"); 
    setTimeout(function() {$("#php-content").show();$("#loader").hide();}, 3000); 
}); 

CSS:

.progress-bar { 
-webkit-transition: width 3s ease-in-out; 
transition: width 3s ease-in-out; 

}

Answer 2

У меня есть некоторые незначительные изменения в коде, я думаю, что это поможет вам, вот код ниже

Html-код

<div id="loader"> 
       <div class="progress"> 
        <div id="loadingBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="3000" style="width: 0%"> 
         <span class="sr-only"></span> 
        </div> 
       </div> 
      </div> 
      <div id="php-content"> 
       <h2>Content:</h2> 
       <table class="table table-bordered"> 
        new content 
       </table> 
      </div> 

Css Код

#loadingBar{background: red;float: left;min-height: 20px;} 
#php-content{display:none;} 

Jquery код

jQuery(document).ready(function(){ 
     jQuery("#php-content").animate({'opacity' : '0'}); 
     jQuery("#loader").animate({'opacity' : '1'}); 
     counter = 0;   
     run(); 
    }); 

    function update(value) { 
     jQuery("#loadingBar").animate({width:value+"px"}); 
     jQuery("#loadingBar").attr("aria-valuenow",value); 
    } 


    function run() {   
     if (counter <= 800) { 
      jQuery("#loader").animate({'opacity' : '1'}); 
      jQuery("#php-content").animate({'opacity' : '0'});    
      update(counter); 
      counter+=10; 
      setTimeout(run(), 10); 
     } else {    
      jQuery("#loader").animate({'opacity' : '0'}); 
      jQuery("#php-content").show(); 
      jQuery("#php-content").animate({'opacity' : '1'}); 
     } 

    } 

Демо ссылка http://jsfiddle.net/kishan_web/b2jzu4er/