Exigences : Nous rencontrerons l'utilisation de diverses barres de progression pendant le développement, car il existe diverses barres de progression dans les plug-ins actuels. Afin de faciliter notre développement personnalisé et notre modification pratique des styles, nous utilisons ici les styles HTML et CSS. fonction barre .
A travers cet article, nous comprendrons comment utiliser HTML/CSS pour créer diverses barres de progression de base et barres de progression sophistiquées et leurs animations.
Créez une barre de progression via le compteur de balises HTML. Créez une barre de progression via la barre de progression HTML. Utilisez CSS pour créer un beignet. barre de progression en forme. Utilisez CSS pour créer une barre de progression sphérique.
La barre de progression la plus courante que nous rencontrons est la barre de progression horizontale. C'est le plus courant, utilisant principalement HTML5 pour fournir deux balises natives et pour implémenter la barre de progression.
Des exemples spécifiques de compteurs sont les suivants :
<p> <span>Exhaustivité :</span> <meter min="0" max="500" value="350">350 degrés</meter> </p>
Parmi eux, min, max et value représentent respectivement la valeur maximale, la valeur minimale et la valeur actuelle.
Jetons un coup d'œil à l'utilisation des balises :
<p> <label for="file">Exhaustivité :</label> <progress max="100" value="70"> 70 % </progress> </p>
Parmi eux, l'attribut max décrit la quantité totale de travail qui doit être accompli pour la tâche représentée par l'élément de progression, et l'attribut value est utilisé pour spécifier la quantité de travail qui a été accomplie par la barre de progression.
Les différences entre les deux sont les suivantes : la question est donc, à en juger par la démo ci-dessus, que les effets des deux labels sont exactement les mêmes, alors quelle est la différence entre eux ? Pourquoi y a-t-il deux étiquettes apparemment identiques ? La plus grande différence entre ces deux éléments est la différence sémantique. Le compteur représente une valeur de mesure scalaire ou une valeur fractionnaire dans une plage connue. La progression représente la progression d'une tâche. Par exemple, le niveau d'achèvement actuel d'une exigence doit être utilisé, et si vous souhaitez afficher la valeur de vitesse actuelle sur une voiture. tableau de bord, un compteur doit être utilisé.
Limites du compteur et de la progression Bien entendu, dans les exigences commerciales réelles ou dans les environnements de production, vous ne verrez presque jamais les étiquettes de compteur et de progression. Nous ne pouvons pas modifier efficacement les styles des étiquettes de compteur et de progression, tels que la couleur d'arrière-plan, la couleur de premier plan de progression, etc. Et le plus fatal est que les performances des styles par défaut des navigateurs sont incohérentes entre les différents navigateurs. Il s’agit d’une lacune catastrophique pour une entreprise qui recherche la stabilité et des performances cohérentes en matière d’interface utilisateur ! Nous ne pouvons pas y ajouter des effets d'animation et des effets interactifs, car dans certains scénarios d'application réels, il ne s'agit certainement pas d'un simple affichage d'une barre de progression et rien de plus. Utilisez CSS pour implémenter la barre de progression.
Par conséquent, à ce stade, davantage de méthodes CSS sont utilisées pour implémenter la barre de progression.
(1) L'une des façons les plus courantes d'utiliser des pourcentages pour implémenter une barre de progression consiste à utiliser une couleur d'arrière-plan combinée à un pourcentage pour créer une barre de progression avec un dégradé. L'exemple DEMO le plus simple est le suivant :
<div class="g-conteneur"> <div class="g-progress"></div> </div> <div class="g-progress"></div>
De même, nous pouvons utiliser l'attribut de style HTML pour remplir la valeur complète de l'arrière-plan et transmettre le pourcentage réel. Bien sûr, il est plus recommandé d'utiliser des attributs personnalisés CSS pour transmettre la valeur afin d'obtenir l'effet d'animation. CSS @property pour transformer notre code :
<div class="g-progress" style="--progress : 70%"></div>
@property --progrès {
syntaxe : '<pourcentage>' ;
hérite : faux ;
valeur initiale : 0 % ;
}
.g-progrès {
marge : auto ;
largeur : 240 px ;
hauteur : 25px ;
rayon de bordure : 25 px ;
arrière-plan : dégradé linéaire (90 degrés, #0f0, #0ff var(--progress), transparent 0 );
bordure : 1px solide #eee ;
transition : .3s --progrès ;
}L'essentiel est d'utiliser un arrière-plan dégradé angulaire : conic-gradient() : L'exemple d'effet est le suivant :
Le code est le suivant :
<div class="progress-circle"
v-for="(item,index) dans progressList" :key="index"
:style="{
arrière-plan : `radial-gradient(#fff 55%, transparent 56%), conic-gradient(#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0,4 : 0 }%),gradient radial(#fff 60%, #F1F3FC 0%);`
}
">
<span class="progress-value" >{{item.name}}</span>
<div class="totalvalbox" >
{{ article.rate }} %
</div>
</div>
<style lang="scss" scoped>
.progress-circle {
position : relative ;
largeur : 149rpx ;
hauteur : 149rpx ;
famille de polices : PingFang SC ;
rayon de bordure : 50 % ;
affichage : flexible ;
align-items : centre ;
justifier-contenu : centre ;
}
.valeur de progression {
position : absolue ;
alignement du texte : centre ;
hauteur de ligne : 50rpx ;
largeur : 100 % ;
poids de la police : 400 ;
taille de police : 26rpx ;
}
.totalvalbox {
largeur minimale : 217 rpx ;
alignement du texte : centre ;
position : absolue ;
bas : -50rpx ;
poids de la police : 400 ;
taille de police : 30rpx ;
}
</style>Le problème d'optimisation est le suivant :
Les problèmes qui ont tendance à se poser ici sont les suivants : Les limites de la réalisation de barres de progression en arc avec des gradients angulaires. Bien entendu, cette méthode présente deux inconvénients. Bien sûr, lorsque le pourcentage de progression n'est pas composé de chiffres comme 0°, 90°, 180°, 270°, 360°, lors de l'utilisation de dégradés angulaires, il y aura des bords irréguliers évidents au niveau des connexions entre les différentes couleurs. Prenons un exemple de dégradé conique (#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D) :
La solution à de tels problèmes est de laisser un espace de gradient au point de connexion. Transformons simplement le code de gradient angulaire ci-dessus :
{
- arrière-plan : dégradé conique (#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
+ arrière-plan : dégradé conique (#FFCDB2 0, #FFCDB2 27 %, #B5838D 27,2 %, #B5838D)`
}Regardez attentivement le code ci-dessus. Le changement de 27 % à 27 % est modifié de 27 % à 27,2 %. Les 0,2 % supplémentaires servent à éliminer l'alias. L'effet réel après le changement :
Dans certains cas, nous rencontrerons une barre de progression avec des coins arrondis à la fin de la barre de progression. Bien entendu, cette situation peut également être résolue si la couleur de la barre de progression est une couleur unie. Nous pouvons obtenir cet effet en superposant deux. petits cercles au début et à la fin. Si la barre de progression est une couleur dégradée, cette barre de progression doit être implémentée à l'aide de SVG/Canvas
Les exemples sont les suivants :
HTML
<div class="g-progress"></div> <div class="g-conteneur"> <div class="g-progress"></div> <div class="g-circle"></div> </div>
css
corps, html {
largeur : 100 % ;
hauteur : 100 % ;
affichage : flexible ;
}
.g-conteneur {
position : relative ;
marge : auto ;
largeur : 200 px ;
hauteur : 200px ;
}
.g-progrès {
position : relative ;
marge : auto ;
largeur : 200 px ;
hauteur : 200px ;
rayon de bordure : 50 % ;
arrière-plan : dégradé conique (#FFCDB2 0, #FFCDB2 25 %, #B5838D 25 %, #B5838D) ;
masque : dégradé radial (transparent, transparent 80px, #000 80,5px, #000 0) ;
}
.g-cercle {
position : absolue ;
haut : 0 ;
gauche : 0 ;
&::avant,
&::après {
contenu: "";
position : absolue ;
haut : 90 px ;
gauche : 90px ;
largeur : 20 px ;
hauteur : 20px ;
rayon de bordure : 50 % ;
arrière-plan : #FFCDB2 ;
indice z : 1 ;
}
&::avant {
transformer : traduire (0, -90px);
}
&::après {
transformation : rotation (90 deg) translation (0, -90px );
}
}Sur la base de cette extension, vous pouvez également implémenter une barre de progression multicolore en forme d'arc : (Cela peut ne pas ressembler à une barre de progression, mais plutôt à un diagramme circulaire ).
.g-progrès {
largeur : 160 px ;
hauteur : 160px ;
rayon de bordure : 50 % ;
masque : dégradé radial (transparent, transparent 50 %, #000 51 %, #000 0 );
arrière-plan:
dégradé conique (
#FFCDB2 0, #FFDCDB2 25%,
#B5838D 25%, #B5838D 50%,
#673ab7 50 %, #673ab7 90 %,
#ff5722 90,2%, #ff5722 100%
);
}Les barres de progression sphériques sont également relativement courantes, semblables à celles-ci :
Le code de base est le suivant : contrôlez simplement la hauteur de la vague lorsque le conteneur sphérique indique une progression de 0 % à 100 %. Nous pouvons obtenir l'effet d'animation de 0 % à 100 %
<div class="conteneur">
<div class="wave-change"></div>
<div class="wave"></div>
</div>
.conteneur {
largeur : 200 px ;
hauteur : 200px ;
bordure : 5px RVB solide (118, 218, 255) ;
rayon de bordure : 50 % ;
débordement : caché ;
}
.changement d'onde {
position : absolue ;
largeur : 200 px ;
hauteur : 200px ;
gauche : 0 ;
haut : 0 ;
animation : changement linéaire infini de 12 s ;
&::avant,
&::après{
contenu: "";
position : absolue ;
largeur : 400 px ;
hauteur : 400px ;
haut : 0 ;
gauche : 50 % ;
couleur d'arrière-plan : rgba(255, 255, 255, .6) ;
rayon-frontière : 45 % 47 % 43 % 46 % ;
transformer : traduire (-50 %, -70 %) rotation (0);
animation : rotation 7s linéaire infinie ;
indice z : 1 ;
}
&::après {
rayon-frontière : 47 % 42 % 46 % 44 % ;
couleur d'arrière-plan : rgba(255, 255, 255, .8) ;
transformer : traduire (-50 %, -70 %) rotation (0);
animation : rotation 9s linéaire -4s infinie ;
indice z : 2 ;
}
}
.vague {
position : relative ;
largeur : 200 px ;
hauteur : 200px ;
couleur d'arrière-plan : RVB (118, 218, 255) ;
rayon de bordure : 50 % ;
}
p{
position : absolue ;
haut : 50 % ;
gauche : 50 % ;
transformer : traduire (-50 %, -50 %);
taille de police : 36 px ;
couleur : #000 ;
indice z : 10 ;
}
@keyframes tournent {
à {
transformer : traduire (-50 %, -70 %) rotation (360 deg );
}
}
@keyframes change {
depuis {
haut : 80 px ;
}
à {
haut : -120px ;
}
}Bien entendu, CSS est en constante évolution et les types de barres de progression ne se limitent certainement pas aux catégories ci-dessus. Par exemple, nous pouvons utiliser des filtres pour imiter l'animation de chargement des téléphones mobiles Huawei, ce qui est également une façon de présenter une barre de progression et peut également être implémenté en utilisant du CSS pur :
Le code de base est le suivant
<div class="g-conteneur">
<div class="g-number">98,7 %</div>
<div class="g-contraste">
<div class="g-circle"></div>
<ul class="g-bulles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
HTML,
corps {
largeur : 100 % ;
hauteur : 100 % ;
affichage : flexible ;
arrière-plan : #000 ;
débordement : caché ;
}
.g-numéro {
position : absolue ;
largeur : 300 px ;
haut : 27 % ;
alignement du texte : centre ;
taille de police : 32 px ;
indice z : 10 ;
couleur : #fff ;
}
.g-conteneur {
position : relative ;
largeur : 300 px ;
hauteur : 400px ;
marge : auto ;
}
.g-contraste {
filtre : contraste (10) teinte-rotation (0 );
largeur : 300 px ;
hauteur : 400px ;
couleur d'arrière-plan : #000 ;
débordement : caché ;
animation : hueRotate 10s linéaire infini ;
}
.g-cercle {
position : relative ;
largeur : 300 px ;
hauteur : 300px ;
dimensionnement de la boîte : bordure-boîte ;
filtre : flou (8 px );
&::après {
contenu: "";
position : absolue ;
haut : 40 % ;
gauche : 50 % ;
transformer : traduire (-50 %, -50 %) rotation (0);
largeur : 200 px ;
hauteur : 200px ;
couleur d'arrière-plan : #00ff6f ;
rayon-frontière : 42 % 38 % 62 % 49 % / 45 % ;
animation : rotation linéaire infinie de 10 s ;
}
&::avant {
contenu: "";
position : absolue ;
largeur : 176 px ;
hauteur : 176px ;
haut : 40 % ;
gauche : 50 % ;
transformer : traduire (-50 %, -50 %);
rayon de bordure : 50 % ;
couleur d'arrière-plan : #000 ;
indice z : 10 ;
}
}
.g-bulles {
position : absolue ;
gauche : 50 % ;
bas : 0 ;
largeur : 100 px ;
hauteur : 40px ;
transformer : traduire (-50 %, 0 );
rayon de bordure : 100px 100px 0 0 ;
couleur d'arrière-plan : #00ff6f ;
filtre : flou (5px) ;
}
li {
position : absolue ;
rayon de bordure : 50 % ;
arrière-plan : #00ff6f ;
}
@pour $i de 0 à 15 {
li:ntième-enfant(#{$i}) {
$largeur : 15 + aléatoire(15) + px ;
gauche : 15 + aléatoire (70) + px ;
haut : 50 % ;
transformer : traduire (-50 %, -50 %);
largeur : $largeur ;
hauteur : $largeur ;
animation : moveToTop #{random(6) + 3}s facilité d'entrée -#{random(5000)/1000}s infini ;
}
}
@keyframes tournent {
50% {
rayon-frontière : 45 % / 42 % 38 % 58 % 49 % ;
}
100 % {
transformer : traduire (-50 %, -50 %) rotation (720 deg );
}
}
@keyframes moveToTop {
90% {
opacité : 1 ;
}
100 % {
opacité : 0,1 ;
transformer : traduire (-50%, -180px);
}
}
@keyframes teinteRotate {
100 % {
filtre : contraste (15) teinte-rotation (360 deg );
}
}Enfin, je recommande plusieurs barres de progression de bonne qualité et sympas.
L'implémentation complète des effets ci-dessus peut être cliquée - utilisez intelligemment CSS pour obtenir des animations de chargement sympas
Ceci conclut cet article sur la façon d'implémenter diverses fonctions de barre de progression via HTML/CSS. C'est tout pour l'introduction de l'article. Pour plus de contenu de la barre de progression HTML CSS, veuillez rechercher les articles précédents de downcodes.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que vous soutiendrez downcodes.com à l'avenir !