Auf Webseiten werden häufig Fortschrittsbalkeneffekte wie die Halbierung des Systems, das Ladestatus usw. gesehen. Die Fortschrittsbalkenkomponente verwendet die Übergangs- und Animationsattribute von CSS3, um einige Spezialeffekte zu vervollständigen. Diese Spezialeffekte werden in IE9 und unterhalb von Versionen von IE9 und Firefox nicht unterstützt, und Opera 12 unterstützt keine Animationsattribute.
Die Fortschrittsleiste ist wie andere unabhängige Komponenten. Entwickler können die entsprechende Version entsprechend ihren Anforderungen auswählen:
Weniger: Progress-Bars.Less
SASS: _Progress-Bars.scss
Grundlegende Fortschrittsbalken
Implementierungsprinzip:
Es sind zwei Behälter erforderlich. Der äußere Container verwendet den Klassennamen. wobei .Progres verwendet wird, um die Hintergrundfarbe des Fortschrittsbalkenbehälters, die Höhe, den Abstand usw.; und .Progres-Bar setzt die Fortschrittsrichtung, die Hintergrundfarbe und die übermäßige Wirkung des Fortschrittsbalkens; Das Folgende ist der CSS -Quellcode:
progress {height: 20px;margin-bottom: 20px;overflow: hidden;background-color: #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);}.progress-bar {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-Übersetzung: Breite .6s Leichtigkeit; Übergang: Breite .6s Leichtigkeit;}Beispiel:
<div> <div rollen = "progressBar" aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100"> <span> 30%</span> </div> </div>
Rollenattributfunktion: Suchmaschinen, dass die Funktion dieses Div die Fortschrittsleiste ist.
ARIA-VALUENOW = ”30” Attributfunktion: Der aktuelle Fortschrittsbalken-Fortschritt beträgt 40%;
ARIA-VALUEMIN = ”0” Attributfunktion: Der Mindestwert des Fortschrittsbalken beträgt 0%;
ARIA-VALUEMAX = ”100” Attributfunktion: Der Maximalwert des Fortschrittsbalkens beträgt 100%;
Sie können das <Pan> -Tag mit dem. -Sr-Klassensatz aus der Fortschrittsbalkenkomponente entfernen, um den aktuellen Fortschritt anzuzeigen.
<div> <div rollen = "progressBar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100"> 40%</div> </div>
Farbenfrohe Fortschrittsbalken
Die farbige Fortschrittsleiste entspricht der Warnprozessleiste. Um den Benutzern eine bessere Erfahrung zu bieten, werden auch verschiedene Fortschrittsbalkenfarben gemäß verschiedenen Zuständen konfiguriert, hauptsächlich die folgenden vier Typen:
Progress-Bar-Info: Repräsentiert die Information Progress-Leiste, blau
Progress-Bar-Success: Zeigt den Erfolgsfortschrittsbalken an, grün
Progress-Bar-Warnung: Zeigt die Warnprogressleiste gelb an
Progress-Bar-Danger: Zeigt die Fehlerfortschrittsleiste an, rot
CSS -Quellcode:
.Progress-bar-SUCCESS {BIGHING COLOR: #5CB85C;}. Progress-Bar-Info {Hintergrund-Color: #5bc0de;}. Progress-Bar-Warning {Hintergrund-Color: #f0ad4e;}.Wie man verwendet:
Fügen Sie einfach den entsprechenden Klassennamen der grundlegenden Fortschrittsleiste hinzu
Beispiel:
<h1> Buntes Fortschrittsbalken </h1> <div> <div rollen = "progreshtBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25%%</div> </div> <div> <divaluemax = "progreshbar" aria-valuemax = "aria-valuemax =" aria-valuemax = "aria-valuemax =" aria-valuemax aria-valuemax = "0"> 40%</div> </div> <div> <div rollen = "progreshbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </dival. aria-valuemin = "0"> 60%</div> </div>
Die Effekte sind wie folgt:
Gestreifte Fortschrittsbalken
Der gestreifte Fortschrittsbalken verwendet den linearen Gradienten von CSS3. Es wird keine Bilder verwendet. Wenn Sie die gestreifte Fortschrittsbalken verwenden, müssen Sie nur den Klassennamen "Fortschritt" zum Behälter der Fortschrittsleiste "Fortschritt" hinzufügen. Fortschritt. Wenn Sie einen Fortschritt wie ein Farbfortschritt machen und einen Farbffekt haben möchten, müssen Sie dem Fortschrittsbalken nur den entsprechenden Farbklassennamen hinzufügen.
Das Folgende ist der Quellcode für progress gestreifte Stil:
. 75%, transparent 75%, transparent );background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); Hintergrundgröße: 40px 40px;}
Jeder Zustand, der dem Streak -Fortschritt entspricht, hat auch eine andere Farbe
. transparent 75%, transparent 75%, transparent );background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 25%, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, .15) 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, transparent 75%, transparent);}. 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. 75%, transparent); 75%, transparent 75%, transparent); .15) 75%, transparent 75%, transparent);background-image: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, .15) 25%, transparent 25%, transparent 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, transparent 75%, transparent);}
Werfen wir einen Blick auf die Verwendung von gestreiften Fortschrittsbalken:
<h1> gestreifter Fortschrittsbalken </h1> <div> <div rollen = "progreshingBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25%ig </div> </div> <div> <divaluemax = "progreshbar" aria-valuemax = "aria-valuemax =" aria-valuemax = "aria-valuemax =" aria-valuemax = "aria-valuemax =" aria-valuemax = "aria-valuemax =" aria-valuemax = "aria-valuemax =" aria-valuemax = "aria-valuemax =" aria-valuemax aria-valuemax = "0"> 40%</div> </div> <div> <div rollen = "progreshbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </dival. aria-valuemin = "0"> 60%</div> </div>
Dynamische Streifen -Fortschrittsbalken
Dynamische Streifen-Fortschrittsleiste können basierend auf der Fortschrittsleiste realisiert werden.
Das Implementierungsprinzip wird hauptsächlich durch die Animation von CSS3 erreicht. Erstens wird eine Animation für Fortschritts-Streifen über @KeyFrames erstellt. Diese Animation macht hauptsächlich eine Sache, nämlich die Position des Hintergrundbildes, dh den Wert der Hintergrundposition. Da der gestreifte Fortschrittsbalken durch den linearen Gradienten von CSS3 erfolgt, implementiert Lineargradient das Hintergrundbild, das dem Hintergrund entspricht
Hier ist der CSS -Quellcode:
@-Webkit-KeyFrames Progress-Bar-Stripes {von {Hintergrundposition: 40px 0;} zu {Hintergrundposition: 0 0;}}@KeyFrames Progress-Bar-Streifen {von {Hintergrundposition: 40px 0;} zu {Hintergrundposition: 0;}}}}}}}@KeyFrames erstellt nur einen Animationseffekt. Wenn wir möchten, dass sich die Fortschrittsleiste wirklich bewegen, müssen wir die von @keyFrames erstellte Animation "Fortschritts-Bar-Stripes" auf eine bestimmte Weise aufrufen und die Animation auslösen, die durch ein Ereignis wirksam werden kann. Fügen Sie im Bootstrap-Framework einen Klassennamen "aktiv" zum Fortschritt des Fortschrittsbalken-Containers "Fortschritt" hinzu und lassen
Der entsprechende Stilcode für die Anrufanimation lautet wie folgt:
.Progress.Active .Progress-Bar {-Webkit-Animation: Fortschritts-Bar-Streifen 2S Linear Infinite; Animation: Fortschritts-Bar-Stripes 2S Linear Infinite;}Beispiel:
<h1> Dynamic Stripe Progress Balk </h1> <div> <div rollen = "progreshy-bar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25%</div> </div> <div> <dival rollen = "progresh. aria-valuemax = "0"> 40%</div> </div> <div> <div rollen = "progreshbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </dival. aria-valuemin = "0"> 60%</div> </div>
Der Effekt ist wie folgt (da es sich um ein Bild handelt, das direkt aus dem Ergebnis auf der Webseite stammt, kann es seinen dynamischen Effekt hier nicht sehen):
Cascade Progress Bar:
Der Stapelfortschritt kann die inkompatiblen Fortschrittsbalken zusammenfügen und horizontal anordnen.
Beispiel:
<div> <div> </div> <div> </div> <div> </div> <div> </div> </div>
Neben dem Stapeln von Farbfortschrittsbalken können Sie auch gestreifte Fortschrittsbalken stapeln oder gestreifte Fortschrittsbalken mit Farbfortschrittsbalken mischen und stapeln. Sie müssen nur die entsprechenden Fortschrittsbalken zum "Fortschritt" -Container hinzufügen. Beachten Sie auch, dass die Summe der gestapelten Fortschrittsbalken nicht mehr als 100%betragen.
Schauen wir uns ein Beispiel an:
<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
Dies ist eine detaillierte Erklärung des Kenntnisses des Bootstrap -Fortschrittsbalkenkomponenten. Ich hoffe, es wird für alle hilfreich sein!