Anforderungen: Während der Entwicklung werden wir auf die Verwendung verschiedener Fortschrittsbalken stoßen, da es in aktuellen Plug-Ins verschiedene Fortschrittsbalken gibt. Um unsere individuelle Entwicklung und bequeme Änderung von Stilen zu erleichtern, verwenden wir hier den Fortschrittsstil Bar-Funktion .
In diesem Artikel werden wir verstehen, wie man mit HTML/CSS verschiedene grundlegende Fortschrittsbalken und ausgefallene Fortschrittsbalken und deren Animationen erstellt.
Erstellen Sie einen Fortschrittsbalken über den HTML-Tag-Fortschritt. Verwenden Sie CSS-Prozentsätze und -Verläufe, um normale Fortschrittsbalken und deren Animationen zu erstellen. Verwenden Sie CSS, um einen kugelförmigen Fortschrittsbalken zu erstellen.
Der am häufigsten vorkommende Fortschrittsbalken ist der horizontale Fortschrittsbalken. Dies ist die gebräuchlichste Methode und verwendet hauptsächlich HTML5, um zwei native Tags bereitzustellen und den Fortschrittsbalken zu implementieren.
Konkrete Beispiele für Messgeräte sind:
<p> <span>Vollständigkeit:</span> <meter min="0" max="500" value="350">350 Grad</meter> </p>
Unter diesen repräsentieren Min, Max und Wert den Maximalwert, den Minimalwert bzw. den aktuellen Wert.
Werfen wir einen Blick auf die Verwendung von Tags:
<p> <label for="file">Vollständigkeit:</label> <progress max="100" value="70"> 70 % </progress> </p>
Unter diesen beschreibt das Max-Attribut den Gesamtarbeitsumfang, der für die durch das Fortschrittselement dargestellte Aufgabe erledigt werden muss, und das Wertattribut wird verwendet, um den Arbeitsumfang anzugeben, der durch den Fortschrittsbalken abgeschlossen wurde.
Die Unterschiede zwischen den beiden sind wie folgt: Die Frage ist also, der obigen Demo nach zu urteilen, dass die Auswirkungen der beiden Bezeichnungen genau gleich sind. Was ist also der Unterschied zwischen ihnen? Warum gibt es zwei scheinbar identische Etiketten? Der größte Unterschied zwischen diesen beiden Elementen ist der semantische Unterschied. Meter stellt einen skalaren Messwert oder Bruchwert innerhalb eines bekannten Bereichs dar. Der Fortschritt stellt den Abschlussfortschritt einer Aufgabe dar. Beispielsweise sollte der aktuelle Abschlussstand einer Anforderung verwendet werden, und wenn Sie den aktuellen Geschwindigkeitswert an einem Auto anzeigen möchten Armaturenbrett, Messgerät sollte verwendet werden.
Einschränkungen bei Messgerät und Fortschritt Natürlich werden Sie in tatsächlichen Geschäftsanforderungen oder Produktionsumgebungen die Messgerät- und Fortschrittsbezeichnungen fast nie sehen. Wir können die Stile der Messgeräte- und Fortschrittsbeschriftungen, wie z. B. Hintergrundfarbe, Fortschrittsvordergrundfarbe usw., nicht effektiv ändern. Und das Schlimmste daran ist, dass die Leistung der Browser-Standardstile zwischen verschiedenen Browsern inkonsistent ist. Dies ist ein katastrophales Manko für ein Unternehmen, das Stabilität und konsistente UI-Leistung anstrebt! Wir können keine Animationseffekte und interaktiven Effekte hinzufügen, da es sich in einigen tatsächlichen Anwendungsszenarien definitiv nicht um die einfache Anzeige eines Fortschrittsbalkens handelt und nichts weiter ist. Verwenden Sie CSS, um den Fortschrittsbalken zu implementieren.
Daher werden in dieser Phase mehr CSS-Methoden verwendet, um den Fortschrittsbalken zu implementieren.
(1) Eine der gebräuchlichsten Möglichkeiten, Prozentsätze zur Implementierung eines Fortschrittsbalkens zu verwenden, besteht darin, eine Hintergrundfarbe in Kombination mit einem Prozentsatz zu verwenden, um einen Fortschrittsbalken mit einem Farbverlauf zu erstellen. Das einfachste DEMO-Beispiel ist wie folgt:
<div class="g-container"> <div class="g-progress"></div> </div> <div class="g-progress"></div>
Ebenso können wir das HTML-Stilattribut verwenden, um den vollständigen Hintergrundwert einzugeben und den tatsächlichen Prozentsatz zu übergeben. Natürlich ist es empfehlenswerter, benutzerdefinierte CSS-Attribute zu verwenden, um den Animationseffekt zu erzielen CSS @property zur Transformation unseres Codes:
<div class="g-progress" style="--progress: 70%"></div>
@property --progress {
Syntax: '<Prozentsatz>';
erbt: false;
Anfangswert: 0%;
}
.g-progress {
Rand: automatisch;
Breite: 240px;
Höhe: 25px;
Randradius: 25px;
Hintergrund: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
Rand: 1px fest #eee;
Übergang: .3s --progress;
}Der Kern besteht darin, den Winkelgradientenhintergrund zu verwenden : conic-gradient(): Der Beispieleffekt ist wie folgt:
Der Code lautet wie folgt:
<div class="progress-circle"
v-for="(item,index) in progressList" :key="index"
:style="{
Hintergrund: `radial-gradient(#fff 55%, transparent 56%), conic-gradient(#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0,4 : 0 }%),radial-gradient(#fff 60%, #F1F3FC 0%);`
}
">
<span class="progress-value" >{{item.name}}</span>
<div class="totalvalbox" >
{{ item.rate }} %
</div>
</div>
<style lang="scss" Scoped>
.progress-circle {
Position: relativ;
Breite: 149 rpx;
Höhe: 149rpx;
Schriftfamilie: PingFang SC;
Randradius: 50 %;
Anzeige: Flex;
align-items: center;
rechtfertigen-Inhalt: Mitte;
}
.fortschrittswert {
Position: absolut;
Textausrichtung: Mitte;
Zeilenhöhe: 50rpx;
Breite: 100 %;
Schriftstärke: 400;
Schriftgröße: 26rpx;
}
.totalvalbox {
Mindestbreite: 217 rpx;
Textausrichtung: Mitte;
Position: absolut;
unten: -50rpx;
Schriftstärke: 400;
Schriftgröße: 30rpx;
}
</style>Das Optimierungsproblem lautet wie folgt:
Die Probleme, die hier auftreten, sind folgende: Die Einschränkungen bei der Realisierung von Bogenfortschrittsbalken mit Winkelverläufen. Diese Methode hat natürlich zwei Nachteile. Wenn der Fortschrittsprozentsatz natürlich keine Zahlen wie 0°, 90°, 180°, 270°, 360° ist und Winkelverläufe verwendet werden, treten an den Verbindungen zwischen verschiedenen Farben deutlich gezackte Kanten auf. Nehmen Sie ein Beispiel für einen konischen Gradienten (#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D):
Die Lösung für solche Probleme besteht darin, am Verbindungspunkt etwas Gradientenraum zu lassen. Transformieren wir einfach den obigen Winkelgradientencode:
{
- Hintergrund: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
+ Hintergrund: conic-gradient(#FFCDB2 0, #FFCDB2 27 %, #B5838D 27,2 %, #B5838D)`
}Schauen Sie sich den obigen Code genau an. Die Änderung von 27 % auf 27,2 % dient der Eliminierung von Aliasing.
In einigen Fällen werden wir am Ende des Fortschrittsbalkens auf einen Fortschrittsbalken mit abgerundeten Ecken stoßen. Diese Situation kann natürlich auch gelöst werden, wenn die Farbe des Fortschrittsbalkens einfarbig ist. Wir können diesen Effekt erzielen, indem wir zwei überlagern kleine Kreise am Anfang und Ende. Wenn der Fortschrittsbalken eine Verlaufsfarbe hat, muss dieser Fortschrittsbalken mit Hilfe von SVG/Canvas implementiert werden
Beispiele sind wie folgt:
html
<div class="g-progress"></div> <div class="g-container"> <div class="g-progress"></div> <div class="g-circle"></div> </div>
CSS
Körper, HTML {
Breite: 100 %;
Höhe: 100 %;
Anzeige: Flex;
}
.g-Container {
Position: relativ;
Rand: automatisch;
Breite: 200px;
Höhe: 200px;
}
.g-progress {
Position: relativ;
Rand: automatisch;
Breite: 200px;
Höhe: 200px;
Randradius: 50 %;
Hintergrund: conic-gradient(#FFCDB2 0, #FFCDB2 25 %, #B5838D 25 %, #B5838D);
Maske: radialer Farbverlauf (transparent, transparent 80px, #000 80,5px, #000 0);
}
.g-circle {
Position: absolut;
oben: 0;
links: 0;
&::vor,
&::nach {
Inhalt: "";
Position: absolut;
oben: 90px;
links: 90px;
Breite: 20px;
Höhe: 20px;
Randradius: 50 %;
Hintergrund: #FFCDB2;
Z-Index: 1;
}
&::before {
transformieren: Translate(0, -90px);
}
&::nach {
transformieren: rotieren (90 Grad) übersetzen (0, -90 Pixel);
}
}Basierend auf dieser Erweiterung können Sie auch einen mehrfarbigen bogenförmigen Fortschrittsbalken implementieren: (Dies sieht möglicherweise nicht wie ein Fortschrittsbalken aus, sondern ähnelt eher einem Kreisdiagramm .)
.g-progress {
Breite: 160px;
Höhe: 160px;
Randradius: 50 %;
Maske: radialer Farbverlauf (transparent, transparent 50 %, #000 51 %, #000 0);
Hintergrund:
konischer-gradient(
#FFCDB2 0, #FFCDB2 25 %,
#B5838D 25 %, #B5838D 50 %,
#673ab7 50 %, #673ab7 90 %,
#ff5722 90,2 %, #ff5722 100 %
);
}Auch kugelförmige Fortschrittsbalken sind relativ häufig anzutreffen, ähnlich den folgenden:
Der Kerncode lautet wie folgt: Steuern Sie einfach die Höhe der Welle, wenn der kugelförmige Behälter einen Fortschritt von 0 % bis 100 % anzeigt. Wir können den Animationseffekt von 0 % bis 100 % erzielen.
<div class="container">
<div class="wave-change"></div>
<div class="wave"></div>
</div>
.container {
Breite: 200px;
Höhe: 200px;
Rand: 5 Pixel einfarbiges RGB (118, 218, 255);
Randradius: 50 %;
Überlauf: versteckt;
}
.wave-change {
Position: absolut;
Breite: 200px;
Höhe: 200px;
links: 0;
oben: 0;
Animation: Änderung 12s unendlich linear;
&::vor,
&::nach{
Inhalt: "";
Position: absolut;
Breite: 400px;
Höhe: 400px;
oben: 0;
links: 50 %;
Hintergrundfarbe: rgba(255, 255, 255, .6);
Randradius: 45 % 47 % 43 % 46 %;
transform: translator(-50%, -70%) rotate(0);
Animation: 7s linear unendlich drehen;
Z-Index: 1;
}
&::nach {
Randradius: 47 % 42 % 46 % 44 %;
Hintergrundfarbe: rgba(255, 255, 255, .8);
transform: translator(-50%, -70%) rotate(0);
Animation: 9s linear drehen -4s unendlich;
Z-Index: 2;
}
}
.Welle {
Position: relativ;
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: rgb(118, 218, 255);
Randradius: 50 %;
}
P {
Position: absolut;
oben: 50 %;
links: 50 %;
transform: Translate(-50%, -50%);
Schriftgröße: 36px;
Farbe: #000;
Z-Index: 10;
}
@keyframes drehen {
Zu {
transformieren: translator(-50%, -70%) rotate(360deg);
}
}
@keyframes ändern {
aus {
oben: 80px;
}
Zu {
oben: -120px;
}
}Natürlich ändert sich CSS ständig und die Arten von Fortschrittsbalken sind definitiv nicht auf die oben genannten Kategorien beschränkt. Beispielsweise können wir mit Filtern die Ladeanimation von Huawei-Handys nachahmen, was auch eine Möglichkeit zur Darstellung eines Fortschrittsbalkens darstellt und auch mit reinem CSS umgesetzt werden kann:
Der Kerncode lautet wie folgt
<div class="g-container">
<div class="g-number">98,7 %</div>
<div class="g-contrast">
<div class="g-circle"></div>
<ul class="g-bubbles">
<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,
Körper {
Breite: 100 %;
Höhe: 100 %;
Anzeige: Flex;
Hintergrund: #000;
Überlauf: versteckt;
}
.g-Nummer {
Position: absolut;
Breite: 300px;
oben: 27 %;
Textausrichtung: Mitte;
Schriftgröße: 32px;
Z-Index: 10;
Farbe: #fff;
}
.g-Container {
Position: relativ;
Breite: 300px;
Höhe: 400px;
Rand: automatisch;
}
.g-Kontrast {
Filter: Kontrast(10) Farbton-Rotate(0);
Breite: 300px;
Höhe: 400px;
Hintergrundfarbe: #000;
Überlauf: versteckt;
Animation: hueRotate 10s unendlich linear;
}
.g-circle {
Position: relativ;
Breite: 300px;
Höhe: 300px;
Boxgröße: border-box;
Filter: Unschärfe (8px);
&::nach {
Inhalt: "";
Position: absolut;
oben: 40 %;
links: 50 %;
transform: translator(-50%, -50%) rotate(0);
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: #00ff6f;
Randradius: 42 % 38 % 62 % 49 % / 45 %;
Animation: 10s unendlich linear drehen;
}
&::before {
Inhalt: "";
Position: absolut;
Breite: 176px;
Höhe: 176px;
oben: 40 %;
links: 50 %;
transform: Translate(-50%, -50%);
Randradius: 50 %;
Hintergrundfarbe: #000;
Z-Index: 10;
}
}
.g-Bubbles {
Position: absolut;
links: 50 %;
unten: 0;
Breite: 100px;
Höhe: 40px;
transform: Translate(-50%, 0);
Randradius: 100px 100px 0 0;
Hintergrundfarbe: #00ff6f;
Filter: Unschärfe (5px);
}
li {
Position: absolut;
Randradius: 50 %;
Hintergrund: #00ff6f;
}
@für $i von 0 bis 15 {
li:nth-child(#{$i}) {
$width: 15 + random(15) + px;
links: 15 + random(70) + px;
oben: 50 %;
transform: Translate(-50%, -50%);
Breite: $width;
Höhe: $width;
Animation: moveToTop #{random(6) + 3}s easy-in-out -#{random(5000)/1000}s unendlich;
}
}
@keyframes drehen {
50 % {
Randradius: 45 % / 42 % 38 % 58 % 49 %;
}
100 % {
transformieren: translator(-50%, -50%) rotate(720deg);
}
}
@keyframes moveToTop {
90 % {
Deckkraft: 1;
}
100 % {
Deckkraft: .1;
transform: Translate(-50%, -180px);
}
}
@keyframes hueRotate {
100 % {
Filter: Kontrast (15) Farbton-Drehung (360 Grad);
}
}Abschließend empfehle ich noch einige gute, hochwertige und coole Fortschrittsbalken.
Die vollständige Umsetzung der oben genannten Effekte ist anklickbar – nutzen Sie geschickt CSS, um coole Ladeanimationen zu erzielen
Damit ist dieser Artikel über die Implementierung verschiedener Fortschrittsbalkenfunktionen über HTML/CSS abgeschlossen. Das war's mit der Einleitung des Artikels. Für weitere verwandte HTML-CSS-Fortschrittsbalkeninhalte durchsuchen Sie bitte die vorherigen Artikel von downcodes.com oder stöbern Sie weiter unten in den entsprechenden Artikeln. Ich hoffe, Sie werden downcodes.com in Zukunft unterstützen!