モーダルタイマーの進捗バー

Question

ボタンをクリックするとモーダルができます。モーダルポップアップが表示され、タイマーがアップすると現在5秒間閉じます。しかし、私はタイマーがダウンしていることを示す進捗バーを作成したいと思います。

ここに私がすでに持っているものがあります：​​あなたはモーダルのためのボタン「管理」をクリックしなければなりません。

ここで私は達成したいと思っています。私は自分のフォトショップのスキルがポイントではないことを知っていますが、急いでいました。下部の白いバーはプログレスバーです。

私はこれを試しましたが、私が必要なものには適していなかったので、うまくいかなかったのです。

var start = new Date(); 
var maxTime = 835000; 

var timeoutVal = Math.floor(maxTime/100); 

animateUpdate(); 

function updateProgress(percentage) { 
    $('#pbar_innerdiv').css("width", percentage + "%"); 
    $('#pbar_innertext').text(percentage + "%"); 
} 

function animateUpdate() { 
    var now = new Date(); 
    var timeDiff = now.getTime() - start.getTime(); 
    var perc = Math.round((timeDiff/maxTime)*100); 
     if (perc <= 100) { 
     updateProgress(perc); 
     setTimeout(animateUpdate, timeoutVal); 
     } 
} 

Refernce：任意の助けjQuery progress timer bar

感謝。

Answer 1

正しくは、あなたの質問を理解しますが、お役に立てば幸いかどうかは知りません。

フィドル：https://jsfiddle.net/cde2cup0/2/

var progressBar = document.getElementById('myProgressBar'); 
function setAnimation(timeInSeconds, callbackFunction) { 
    var count = 0; 
    var interval = setInterval(function() { 
     if (count == timeInSeconds) { 
      callbackFunction(); 
      clearInterval(interval); 
     } 
     progressBar.style.width = (100 * count/timeInSeconds) + '%'; 
     count++; 
    }, 1000); 
};