Индикатор начала выполнения, когда div отображается

Question

У меня есть простой индикатор jQuery, который я использую; но я использую его в div, который по умолчанию скрыт при загрузке страницы, а затем отображается после завершения формы. Проблема заключается в следующем; индикатор прогресса отображается только в зависимости от того, насколько быстро пользователь заполняет форму. Поскольку индикатор выполнения начинается с загрузки страницы с помощью $(document).ready(function() {

Как установить его и вызвать мой индикатор выполнения для загрузки после того, как div отобразится, что его? НАПРИМЕР. Форма завершена> Следующие div показывает, что начинается мой индикатор выполнения. Ниже приведен код, который я использую для бара.

var progress = setInterval(function() { 
    var $bar = $('.bar'); 

    if ($bar.width()==400) { 
     clearInterval(progress); 
     $('.progress').removeClass('active'); 
    } else { 
     $bar.width($bar.width()+40); 
    } 
    $bar.text($bar.width()/4 + "%"); 
}, 900); 

Любые указатели?

Answer 1

Попробуйте demo.

В основном вам необходимо привязать событие submit к форме. В функции обработчика события отображается индикатор выполнения и делайте то, что вы хотите.

function showProgressBar(){ 
    var progress = setInterval(function() { 
     $('#form').hide(); 
     var $bar = $('.bar'); 
     $bar.show(); // show it here 

     if ($bar.width()==400) { 
      clearInterval(progress); 
      $('.progress').removeClass('active'); 
     } else { 
      $bar.width($bar.width()+40); 
     } 
     $bar.text($bar.width()/4 + "%"); 
    }, 900); 

    return false; 
} 

$(window).load(function(){ 
    $('#form').submit(showProgressBar); // bind the submit event 
}