css+js實現動態進度條效果的方法是什么

這篇文章將為大家詳細講解有關css+js實現動態進度條效果的方法是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

我們要知道，這里主要使用了css3的animation動畫屬性，首先將進度條設置為一個初始寬度為0，背景色為綠色，高度與容器相同的元素；在通過animation動畫屬性對其寬度進行過渡，從而實現進度條填充的效果。

我們來看看css3的animation動畫屬性的相關知識。

animation 屬性是一個簡寫屬性，用于設置六個動畫屬性：

animation-name：規定需要綁定到選擇器的 keyframe 名稱；

animation-duration：規定完成動畫所花費的時間，以秒或毫秒計；

animation-timing-function：規定動畫的速度曲線；

animation-delay：規定在動畫開始之前的延遲；

animation-iteration-count：規定動畫應該播放的次數；

animation-direction：規定是否應該輪流反向播放動畫

下面我們來看看具體的實現動態進度條效果的方法。

css+js實現簡單的動態進度條效果的代碼示例：

html代碼：

<!--外層容器-->
<div id="wrapper">
    <!--進度條容器-->
    <div id="progressbar">
        <!--用來模仿進度條推進效果的進度條元素-->
        <div id="fill"></div>
    </div>
</div>

css代碼：

#wrapper{
    position: relative;
    width:200px;
    height:100px;
    border:1px solid darkgray;
}
#progressbar{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-90px;
    margin-top:-10px;
    width:180px;
    height:20px;
    border:1px solid darkgray;

}
/*在進度條元素上調用動畫*/
#fill{
    animation: move 2s;
    text-align: center;
    background-color: #6caf00;
}
/*實現元素寬度的過渡動畫效果*/
@keyframes move {
    0%{
        width:0;

    }
    100%{
        width:100%;
    }
}

js代碼：

var progressbar={
    init:function(){
        var fill=document.getElementById('fill');
        var count=0;
    //通過間隔定時器實現百分比文字效果,通過計算CSS動畫持續時間進行間隔設置
        var timer=setInterval(function(e){
            count++;
            fill.innerHTML=count+'%';
            if(count===100) clearInterval(timer);
        },17);
    }
};
progressbar.init();

效果圖：

關于css+js實現動態進度條效果的方法是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。