Яркость выполнения Javascript после загрузки

Question

У меня есть простая HTML-страница с индикатором выполнения JavaScript. Моя страница перезагружается каждые 30 секунд, и мой индикатор выполнения установлен на 30 секунд после загрузки.

Я хочу, чтобы очистить значение индикатора выполнения каждый раз, когда страница перезагружается и снова загружается с 0 до 100%. Кто-нибудь может мне с этим помочь? Спасибо!

Вот что у меня есть.

HTML

<input type="text" id="val1" placeholder="Search" onKeyPress="Val1KeyPress()" onKeyUp="Val1KeyPress()"/> 

<input type = "text" id="date" placeholder="date to"> 
      <img src="cal1.png" /> 
      <input type = "text" id="date1" placeholder="date from"> 
      <img src="cal2.png" /> 
      <input type="submit" id="btn_search" value="search"/> 


<div class = "iframe-div"> 
      <iframe id="iframe" src='http://mypage.aspx' runat="server" allowTransparency='true' width='850px' height='500px'> 
      </iframe> 

     </div> 

    <div id="progressbar" class="progress-wrap progress" data-progress-percent="100"> 
    <div class="progress-bar progress"></div> 
    </div> 

CSS

.progress { 
    width: 100%; 
    height: 50px; 
    margin-top:-10px !important; 
} 

.progress-wrap { 
    background: #f80; 
    border-radius: 0 !important; 
    overflow: hidden; 
    position: relative; 
} 
.progress-wrap .progress-bar { 
    background: #ddd; 
    position: absolute; 

} 

Javascript

<script> 
function setURL(url){ 
    document.getElementById('iframe').src = url; 
} 
</script> 

<script> 
    function Val1KeyPress() 
    { 
     var val1 = document.getElementById("val1"); 
     var sr = val1.value; 
     var lblValue = document.getElementById("lblValue"); 
     lblValue.innerText = " "+s; 
    } 
    function sample(){ 
     var val1 = document.getElementById("val1"); 
     var sr = val1.value; 

     var date = document.getElementById("date"); 
     var dtep = "&dateto=".concat(date.value); 

     var date1 = document.getElementById("date1"); 
     var dtep1 = "&datefrm=".concat(date1.value); 

     setURL('http://mypage.aspx?search='.concat(sr, dtep, dtep1)) 
    } 
</script> 


    <script> 
    var picker = new pikdate 
    (
{ 
    field: document.getElementById('date'), 
    firstDay: 1, 
    format: 'MM/DD/YYYY', 
    minDate: new Date(2000, 0, 1), 
    maxDate: new Date(2020, 12, 31), 
    yearRange: [2000, 2020] 
}); 
</script> 
<script> 
    var picker = new Pikaday(
{ 
    field: document.getElementById('date1'), 
    firstDay: 1, 
    format: 'MM/DD/YYYY', 
    minDate: new Date(2000, 0, 1), 
    maxDate: new Date(2020, 12, 31), 
    yearRange: [2000, 2020] 
}); 

</script> 

    <script> 


moveProgressBar(); 
    $(window).resize(function() { 
     moveProgressBar(); 
    }); 
    function moveProgressBar() { 
     console.log("moveProgressBar"); 
     var getPercent = ($('.progress-wrap').data('progress-percent')/100); 
     var getProgressWrapWidth = $('.progress-wrap').width(); 
     var progressTotal = getPercent * getProgressWrapWidth; 
     var animationLength = 30000; 

     // on page load, animate percentage bar to data percentage length 
     // .stop() used to prevent animation queueing 
     $('.progress-bar').stop().animate({ 
      left: progressTotal 
     }, animationLength); 
      clearInterval('.progress-wrap'); 

     var interval = setInterval(function() { 
      clearInterval(interval); 

       setURL('http://mypage.aspx?search?stat=');}) 
      setTimeout(arguments.callee, 31000); 
} 

Answer 1

<style> 
    @keyframes progress { 
     from { 
      transform: scale(0, 1); 
     } 
     to { 
      transform: none; 
     } 
    } 
    .progress { 
     background-color: blue; /*some color*/ 
     height: 4px; /*some height*/ 
     position: absolute; 
     top: 0; 
     right: 0; 
     left: 0; 
     transform-origin: left; 
    } 
    .animation { 
     animation: progress 30s; 
    } 
</style> 
<div class="progress animation"></div> 
<script> 
    var progressBar = document.querySelector('.progress'); 
    function restartprogressBar() { 
     progressBar.classList.remove('animation'); 
     progressBar.offsetWidth = progressBar.offsetWidth; 
     progressBar.classList.add('animation'); 
    }; 
    setInterval(function() { 
     //setURL function comes here 
     restartprogressBar(); 
    }, 30000); 
</script> 

https://jsfiddle.net/namannehra/osae4u5e/