如何用PURE JavaScript創建加載欄？

Question

是否有可能在JavaScript中建立一個進度條。

<div id="progress-bar" style="width:10%;">性開始從0%到100%在10秒

有在jQuery這麼多的解決方案，在同一時間，我不能和純JavaScript找到解決

任何建議大加讚賞，感謝

http://fiddle.jshell.net/5j6gf/

Answer 1

這是的jsfiddle：http://fiddle.jshell.net/5j6gf/1/

如何在JavaScript動畫的答案是從這裏：https://stackoverflow.com/a/11213374/1524085

function animate(elem,style,unit,from,to,time) { 
    if(!elem) return; 
    var start = new Date().getTime(), 
     timer = setInterval(function() { 
      var step = Math.min(1,(new Date().getTime()-start)/time); 
      elem.style[style] = (from+step*(to-from))+unit; 
      if(step == 1) clearInterval(timer); 
     },25); 
    elem.style[style] = from+unit; 
} 

animate(
    document.getElementById('progress-bar'), 
    "width","%",0,100,1000 
); 

Answer 2

jQuery中的任何可能的東西都可以使用純JavaScript。 要麼修復你的問題，要麼發現它是如何在jQuery中完成的，並嘗試用JS重寫它。

您可以使用setTimeout或setInterval來及時增加寬度百分比。您還需要通過將寬度增加一個像素，使每次增加儘可能平滑，直到達到所需的寬度。

有數以百萬計的方法來做到這一點，找到一個適合你的方法。

Answer 3

您應該考慮使用一個CSS過渡，而不是：

#progress-bar { 
    width: 0%; 
    -moz-transition: width 10s linear; 
    -webkit-transition: width 10s linear; 
    transition: width 10s linear; 
} 

Then

document.getElementById("progress-bar").style.width = "100%";