Sur les pages Web, les effets de la barre de progression sont souvent observés, tels que la bissection du système, l'état de chargement, etc. Le composant de la barre de progression utilise les attributs de transition et d'animation de CSS3 pour effectuer certains effets spéciaux. Ces effets spéciaux ne sont pas pris en charge dans les versions IE9 et ci-dessous IE9 et Firefox, et Opera 12 ne prend pas en charge les attributs d'animation.
La barre de progression est comme d'autres composants indépendants, les développeurs peuvent choisir la version correspondante en fonction de leurs besoins:
Moins: progress-barirs.
Sass: _progress-bars.scss
Barre de progrès de base
Principe de mise en œuvre:
Deux conteneurs sont nécessaires. Le conteneur extérieur utilise le nom de classe.Progress et le sous-contraileur utilise le nom de classe.Progress-bar; où .progress est utilisé pour définir la couleur d'arrière-plan du conteneur de la barre de progression, la hauteur, l'espacement, etc.; et .progress-bar définit la direction de progression, la couleur de fond et l'effet excessif de la barre de progrès; Ce qui suit est le code source CSS:
Progrès {hauteur: 20px; marge-fond: 20px; débordement: caché; fond-couleur: # f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba (0, 0, 0 ,1); {float: left;width: 0;height: 100%;font-size: 12px;line-height: 20px;color: #ffff;text-align: center;background-color: #428bca;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); - Webkit-transition: largeur .6s facilité; transition: largeur .6s facilité;}exemple:
<div> <div role = "Progressbar" aria-valuenow = "30" aria-valemin = "0" aria-valuemax = "100"> <span> 30% </span> </div> </div>
Fonction d'attribut de rôle: indique aux moteurs de recherche que la fonction de cette div est la barre de progression;
Aria-Valuenow = ”30” Fonction d'attribut: La progression de la barre de progression actuelle est de 40%;
Aria-Valumin = ”0” Fonction d'attribut: La valeur minimale de la barre de progression est de 0%;
Aria-ValuMax = ”100” Fonction d'attribut: La valeur maximale de la barre de progression est de 100%;
Vous pouvez supprimer la balise <span> avec l'ensemble de classe .sr uniquement du composant de la barre de progression pour permettre à la progression actuelle de s'afficher;
<div> <div role = "Progressbar" aria-valuenow = "40" aria-valemin = "0" aria-valuemax = "100"> 40% </div> </div>
Barre de progression colorée
La barre de progrès colorée est la même que la barre de progrès d'avertissement. Afin de donner aux utilisateurs une meilleure expérience, différentes couleurs de barre de progression sont également configurées en fonction des différents états, y compris principalement les quatre types suivants:
Progress-bar-info: représente la barre de progression de l'information, bleu
Succès de progression-bar: indique la barre de progression du succès, vert
aval de progression-bar: indique la barre de progrès d'avertissement, jaune
Progress-bar-danger: indique la barre de progression des erreurs, rouge
Code source CSS:
.progress-bar-sucre {background-Color: # 5CB85C;}. Progress-Bar-info {background-Color: # 5BC0DE;}. Progress-Bar-Warning {Background-Color: # f0ad4e;}. Progress-Bar-Danger {background-Color: # d9534f;}Comment utiliser:
Ajoutez simplement le nom de classe correspondant à la barre de progression de base
exemple:
<h1> barre de progrès coloré </h1> <div> <div role = "Progressbar" aria-valuenow = "25" Aria-Valumin = "0" Aria-Valuemax = "100"> 25% </div> </div> <div> <divis Role = "Progressbar" Aria-ValuMax = "40" Aria-ValuleMax = "100" Aria-ValuMax = "0"> 40% </div> </div> <div> <div role = "Progressbar" Aria-Valuenow = "25" Aria-Valumin = "0" Aria-Valuemax = "100"> 80% </div> </v> <v> <div role = "Progressbar" Aria-Valuenow = "40" Aria-valuemaS = "Aria-Valuenow =" 40 "Aria-valuemaS =" ARIA-VALUENO aria-valemin = "0"> 60% </div> </div>
Les effets sont les suivants:
Barre de progression rayée
La barre de progression rayée utilise le gradient linéaire de CSS3. Il n'utilise aucune photo. L'utilisation de la barre de progression rayée nécessite uniquement d'ajouter le nom de classe «à rayures de progression» au conteneur de la barre de progression. Progrès. Si vous voulez faire une bande de progrès comme une progression des couleurs et avoir un effet de couleur, il vous suffit d'ajouter le nom de classe de couleur correspondant à la barre de progression.
Ce qui suit est le code source de style rayé .progress:
.progress étanche .progress-bar {Image d'arrière-plan: -webkit-linear-gradient (45Deg, RGBA (255, 255, 255, .15) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, RGBA (255, 255, 255, .15) transparent 75%, transparent); Image d'arrière-plan: gradient linéaire (45DEG, RGBA (255, 255, 255, 0,15) 25%, transparent 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, transparente 75%, transparent); taille arrière: 40px 40px;}Chaque État correspondant aux progrès des stries a également une couleur différente
.progress étanche .progress-bar-success {background-image: -webkit-linear-gradient (45deg, rgba (255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255,. 75%, transparent 75%, transparent); Image en arrière-plan: gradient linéaire (45DEG, RGBA (255, 255, 255, .15) 25%, transparent 25%, transparent 25%, .15) 25%, transparent 25%, transparent 50%, RGBA (255, 255,. 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, transparent 75%, transparent); Image de fond: linéaire-gradient (45 degrés, RGBA (255, 255, 255, .15, 25%, 15%, transparente 50%, RGBA (255, 15%) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-striped .progress-bar-warning {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 25%, transparents 25%, transparents 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, .15) Transparent); Image d'arrière-plan: gradient linéaire (45 degrés, RGBA (255, 255, 255, 0,15) 75%, transparent);}. Progrès .progress-bar-danger {Background-Image: -Webkit-linear-Gradient (45Deg, RGBA (255, 255, 255, .15) 25%, transparent 25%, transparent 50%, RGBA (255, 255, .15) 50%, RGBA (255, 255 ,15) transparent 75%, transparent); Image d'arrière-plan: gradient linéaire (45DEG, RGBA (255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255). transparent 25%, transparent 50%, RGBA (255, 255, 255, 0,15) 50%, RGBA (255, 255, 255, .15) 75%, transparent 75%, transparent);}Jetons un coup d'œil à l'utilisation de barres de progression rayées:
<h1> barre de progression rayée </h1> <div> <div role = "Progressbar" aria-valuenow = "25" aria-valemin = "0" aria-valuemax = "100"> 25% </div> </div> <div> <divis role = "Progressbar" Aria-ValuMax = "40" Aria-ValuleMax = "100" Aria-ValuMax = "0"> 40% </div> </div> <div> <div role = "Progressbar" Aria-Valuenow = "25" Aria-Valumin = "0" Aria-Valuemax = "100"> 80% </div> </v> <v> <div role = "Progressbar" Aria-Valuenow = "40" Aria-valuemaS = "Aria-Valuenow =" 40 "Aria-valuemaS =" ARIA-VALUENO aria-valemin = "0"> 60% </div> </div>
Barre de progression à rayures dynamiques
La barre de progression dynamique à rayures peut être réalisée sur la base de la barre de progression.Progress et de deux classes à rayures.
Le principe de mise en œuvre est principalement accompli par l'animation de CSS3. Tout d'abord, une animation de rayures de progrès est créée via @keyframes. Cette animation fait principalement une chose, qui consiste à modifier la position de l'image d'arrière-plan, c'est-à-dire la valeur de la position d'arrière-plan. Parce que la barre de progression rayée est réalisée par le gradient linéaire de CSS3, et linéaire-gradient implémente l'image d'arrière-plan correspondant à l'arrière-plan
Voici le code source CSS:
@ -webkit-keyframes Progress-Bar-stripes {from {background position: 40px 0;} à {background position: 0 0;}} @ clés de progression-bar-stripes {from {background position: 40px 0;} à {background position: 0 0;}}@KeyFrames crée simplement un effet d'animation. Si nous voulons que la barre de progrès bouge vraiment, nous devons appeler l'animation "Progress-Bar-Stripes" créée par @keyframes d'une certaine manière, et déclencher l'animation pour prendre effet à travers un événement. Dans le framework Bootstrap, ajoutez un nom de classe "actif" au conteneur de la barre de progression "Progress" et laissez le chargement du document être terminé et touchez l'animation "Progress-Bar-Stripes" pour prendre effet
Le code de style correspondant pour l'animation d'appel est le suivant:
.progress.active .progress-bar {-webkit-animation: progress-bar-stripes 2s linéaire infinie; animation: progress-bar-stripes 2s linéaire infinie;}exemple:
<h1> barre de progression de rayures dynamiques </h1> <div> <div role = "Progressbar" aria-valuenow = "25" aria-valemin = "0" aria-valuemax = "100"> 25% </div> </div> <div> <divis role = "Progressbar" Aria-ValuMax = "40" Aria -valuMax = "100" Aria-ValuMax = "0"> 40% </div> </div> <div> <div role = "Progressbar" Aria-Valuenow = "25" Aria-Valumin = "0" Aria-Valuemax = "100"> 80% </div> </v> <v> <div role = "Progressbar" Aria-Valuenow = "40" Aria-valuemaS = "Aria-Valuenow =" 40 "Aria-valuemaS =" ARIA-VALUENO aria-valemin = "0"> 60% </div> </div>
L'effet est le suivant (comme c'est une image qui vient directement du résultat sur la page Web, il ne peut pas voir son effet dynamique ici):
Cascade Progress Bar:
La progression de l'empilement peut rassembler les barres de progrès incompatibles et les organiser horizontalement.
exemple:
<div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
En plus d'empiler les barres de progression des couleurs, vous pouvez également empiler les barres de progression rayées ou mélanger et empiler les barres de progression rayées avec des barres de progression de couleur. Il vous suffit d'ajouter les barres de progression correspondantes au conteneur "Progress". Notez également que la somme des barres de progression empilées ne peut pas être supérieure à 100%.
Jetons un coup d'œil à un exemple:
<div> <div> </ div> <div> </ div> <div> </ div> <div> </div> <div> </div> <div> </div> <div> </ div> <v> </div> <v> </v> </v> </div> <div> </div> <Div> </div> </div> </div> <div> </div> <v> </div> </div>
Il s'agit d'une explication détaillée des connaissances des composants de la barre de progression bootstrap. J'espère que ce sera utile à tous!