Comment obtenir un simple effet de barre de progression dynamique avec CSS+JS ? (exemple de code)

Comment implémenter une barre de progression dynamique simple avec css+js ? Cet article utilisera css+js pour créer un effet de barre de progression dynamique simple et partagera avec vous le code pour le chargement par défilement de la barre de progression dynamique sur la page. J'espère que cela vous sera utile.

Nous devons savoir que l'attribut d'animation de CSS3 est principalement utilisé ici. Tout d'abord, définissez la barre de progression sur un élément avec une largeur initiale de 0, une couleur d'arrière-plan verte et une hauteur identique. en tant que conteneur ; sa largeur est modifiée pour obtenir l'effet de remplissage de la barre de progression.

Jetons un coup d'œil aux connaissances pertinentes de la propriété d'animation de CSS3. L'attribut

animation est un attribut raccourci utilisé pour définir six attributs d'animation :

animation-name : spécifie le nom de l'image clé qui doit être liée au sélecteur

animation- durée : spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes

animation-timing-function : spécifie la courbe de vitesse de l'animation

animation-delay ; spécifie le temps avant le début de l'animation Délai ;

animation-iteration-count : spécifie le nombre de fois où l'animation doit être jouée

animation-direction : spécifie si l'animation doit être jouée ; inverser à son tour

Jetons un coup d'œil aux méthodes

spécifiques pour obtenir un effet de barre de progression dynamique .

Exemple de code CSS+js pour implémenter un effet de barre de progression dynamique simple :

code html :

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

code 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%;
    }
}

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

Rendu :

Résumé : Ce qui précède est le CSS introduit dans cet article + js implémente tout le contenu des effets de barre de progression dynamiques simples. Vous pouvez l'essayer vous-même, approfondir votre compréhension et créer différents effets de barre de progression. J'espère que cela sera utile à votre apprentissage.

Recommandations associées :

Comment obtenir un effet de barre de progression simple en html5 ? Implémentation de la barre de progression dynamique

Qu'est-ce que l'attribut clip en css ? clip:rect() produit une animation de barre de progression circulaire

js implémente un effet de barre de progression de glisser personnalisé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!