js-进度条-动画

效果图如下：

      HTML：

<h1>js实现进度条</h1>

<div id="warp">
<div id="inner" class="nn"></div>
</div>
<br>
<button onclick="move()">加载</button>

css:

 

#warp{
width: 100%;
height: 30px;
background-color: #ddd;
}
#inner{
width: 1%;
background-color: #4caf50;
height: 30px;
/*下面这个过渡属性一定不能加,严重影响动画效果*/
/*transition: all 0.4s ease;*/
}

 

　　js:

 

function move(){
//通过id获取
var inner=document.getElementById("inner");
//通过类来获取
// var inner=document.getElementsByClassName("nn")[0];
var width=1;
var adds=setInterval(addwidth,10);
function addwidth(){
if(width >= 100){
clearInterval(adds);
}else{
width++;
inner.style.width = width + '%';
}
}
}

 

小白一枚，路过大神请嘴下留情，多多指教谢谢。欢迎留下宝贵意见和指出错误呀呀