How to achieve a simple dynamic progress bar effect with css+js? (code example)

How to implement a simple dynamic progress bar in css js? This article will use CSS JS to create a simple dynamic progress bar effect, and share with you the code for scrolling loading of the dynamic progress bar on the page. Interested friends can refer to it. I hope it will be helpful to you.

We need to know that the animation attribute of CSS3 is mainly used here. First, the progress bar is set to an element with an initial width of 0, a background color of green, and a height the same as the container; after the animation attribute is used, Its width is transitioned to achieve the effect of progress bar filling.

Let’s take a look at the relevant knowledge of the animation property of CSS3.

The animation property is a shorthand property for setting six animation properties:

animation-name: specifies the name of the keyframe that needs to be bound to the selector;

animation- duration: specifies the time it takes to complete the animation, in seconds or milliseconds;

animation-timing-function: specifies the speed curve of the animation;

animation-delay: specifies the time before the animation starts Delay;

animation-iteration-count: specifies the number of times the animation should be played;

animation-direction: specifies whether the animation should be played in reverse in turn

Let’s take a look The specific method to achieve the dynamic progress bar effect.

css js code example to implement a simple dynamic progress bar effect:

html code:

<!--外层容器-->
<div id="wrapper">
    <!--进度条容器-->
    <div id="progressbar">
        <!--用来模仿进度条推进效果的进度条元素-->
        <div id="fill"></div>
    </div>
</div>

css code:

#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 code:

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();

Rendering:

Summary: The above is the css js introduced in this article to implement a simple dynamic progress bar You can try all the effects yourself to deepen your understanding and create different progress bar effects. I hope it will be helpful to your learning.

Related recommendations:

How to achieve a simple progress bar effect in html5? Implementation of dynamic progress bar

#What is the clip attribute in css? clip:rect() to create circular progress bar animation

js to implement custom dragging progress bar effect

The above is the detailed content of How to achieve a simple dynamic progress bar effect with css+js? (code example). For more information, please follow other related articles on the PHP Chinese website!