css+js如何實現簡單的動態進度條效果？ （程式碼實例）

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實作簡單的動態進度條效果的全部內容，大家可以自己動手試試，加深理解，製作不同的進度條效果，希望能對大家的學習有所幫助。

相關推薦：

html5如何實現簡單進度條效果？動態進度條的實作

css中clip屬性是什麼？ clip:rect（）製作圓形進度條動畫

js實作自訂拖曳進度條效果#

以上是css+js如何實現簡單的動態進度條效果？ （程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！