уменьшать индикатор выполнения вместо увеличения с помощью javascript

Изменение должно быть довольно простым: вы должны начать с конца (interval = duration) и уменьшить interval--.

Модифицированный код:

containerWidth = 485;     
intervalDuration = 250;   

drawBar=0;

function progressBar(duration) { 
    resetStart(duration);                                                                                                           
    ref=new Date();  start=ref.getTime();                                                                                       
    increment = intervalDuration*containerWidth/duration;                                                                       
    barWidth = interval*increment;                                                                                              
    drawBar = setInterval('progress('+duration%intervalDuration+')', intervalDuration);                                         
}

function progress(lastms) {
    document.getElementById('bar').style.width=barWidth;                                                                        
    document.getElementById('showsecs').innerHTML=Math.floor(interval*intervalDuration/1000);                               
    interval--;                                                                                                             
    if(interval*increment > containerWidth) {                                                                               
        clearInterval(drawBar);                                                                                             
        end=new Date(); end=lastms+end.getTime();                                                                           
        setTimeout("document.getElementById('bar').style.width=containerWidth",lastms);                                     
        setTimeout("document.getElementById('showsecs').innerHTML="+(lastms+intervalDuration*(interval-1))/1000, lastms);   
        setTimeout('window.open("timeout.html");');                                                                         
        }
        else barWidth = interval*increment;                                                                                 
    }

    function resetStart(duration) {                                                                                                     
         if(drawBar) clearInterval(drawBar);                                                                                    
         document.getElementById('bar').style.width = 0;                                                                        
         document.getElementById('showsecs').innerHTML = 0;
         interval = duration;
}

Вот полная переработка вашего кода. Ваш использовал 100% ЦП в цикле, просто ожидая, пока пройдет время.

Параметры:

• Продолжительность в мс
• Плавающий («влево» или «вправо»), заставит полосу двигаться с одной стороны на другую.
• Шаг в мс (частота обновления)

 <script type="text/javascript">
 function progressBar(duration, float, step) {
    document.getElementById('bar').style.float = float;
    setTimeout(updateProgressBar, step, 0, duration , step, float);
 }

 function updateProgressBar(elapsed, duration, step, float) {
    var fullWidth = document.getElementById('container').offsetWidth;
    document.getElementById('bar').style.width = Math.round(
        fullWidth * (elapsed / duration)) + 'px';
    document.getElementById('showsecs').innerHTML = (float === 'right' ? Math.round((duration - elapsed) / 1000):Math.round(elapsed / 1000)) + ' s';
    if(elapsed < duration) {
        setTimeout(updateProgressBar, step, elapsed + step, duration, step, float);
    }
 }
 </script>

 <div id="container">
     <div id="bar"></div>
 </div>
 <div id="showsecs">
 </div>
 <script type="text/javascript">
     progressBar(10000, 'left', 50);
 </script>