Wie stelle ich die Farbe eines Fortschrittsbalkens mithilfe von HTML und CSS ein?

Bei der Website-Entwicklung ist der Fortschrittsbalken ein wichtiger Teil der Website. Der Fortschrittsbalken zeigt den Fortschritt des Prozesses an. Mithilfe dieser Funktion können Benutzer den Status der auf der Website ausgeführten Arbeiten anzeigen, einschließlich Ladezeiten, Datei-Uploads, Datei-Downloads und anderer ähnlicher Aufgaben. Standardmäßig ist es grau. Um die Fortschrittsbalken jedoch hervorzuheben und optisch ansprechend zu gestalten, können Sie ihre Farbe mithilfe von HTML und CSS ändern.

Was ist ein Fortschrittsbalken?

Der Fortschrittsbalken wird verwendet, um den Fortschritt der Aufgabe anzuzeigen. Es handelt sich um ein grafisches Benutzeroberflächenelement. Es besteht im Wesentlichen aus einem horizontalen Balken, der sich im Verlauf der Aufgabe allmählich füllt, begleitet von einem Prozentwert oder einem anderen Abschlussindikator. Fortschrittsbalken werden in Webanwendungen verwendet, um Benutzern Feedback darüber zu geben, wie lange es dauern wird, einen Vorgang abzuschließen, beispielsweise einen Datei-Upload, einen Datei-Download oder eine Softwareinstallation.

Fortschrittsbalken mit HTML erstellen

Fortschrittsbalken können mithilfe der HTML-Auszeichnungssprache erstellt werden. In HTML5 können Sie mit dem Element einen Fortschrittsbalken erstellen. Hier ist ein Beispiel für die Erstellung eines einfachen Fortschrittsbalkens mit HTML:

<progress value="30" max="100"></progress>

Im obigen Beispiel haben wir einen Fortschrittsbalken erstellt und den Fortschrittsbalken als 30 % abgeschlossen angezeigt, wobei wir das Wertattribut auf 30 gesetzt haben. Das Max-Attribut ist auf 100 gesetzt.

Beispiel 1

Beispiel 1

Hier ist ein vollständiges Codebeispiel zum Erstellen eines einfachen Fortschrittsbalkens mit HTML

   
Create a basic progress bar Using HTML
   <progress value="30" max="100"></progress>
   

Legen Sie den Fortschrittsbalkenstil fest

Nachdem wir den Fortschrittsbalken erstellt haben, können wir ihn mit CSS formatieren und seine Farbe festlegen. CSS stellt Entwicklern das Pseudoelement ::-webkit-progress-value zur Verfügung, um die Farbe des Fortschrittsbalkens festzulegen. Unten finden Sie ein Beispiel für die Anwendung von CSS-Stilen auf einen Fortschrittsbalken.

progress {
   width: 300px;
   height : 25px;
   border: 2px solid gray;
}
progress::-webkit-progress-bar {
   background-color: green;
}
progress::-webkit-progress-value {
   background-color: red;
}

Wir legen die Hintergrundfarbe der Pseudoelemente ::-webkit-progress-bar und ::-webkit-progress-value fest. Gleichzeitig legen wir die Höhe und Breite des Fortschrittsbalkens fest, indem wir auf das Element

Beispiel 2

Hier ist ein vollständiges Codebeispiel zum Erstellen eines Fortschrittsbalkens mit HTML und CSS.

   



   
Create progress bar Using HTML and CSS
   <progress value="30" max="100"></progress>

Text zum Fortschrittsbalken hinzufügen

Stellen Sie dem Benutzer zusätzliche Informationen zur Verfügung, indem Sie Text zum Fortschrittsbalken hinzufügen. Dazu erstellen wir zwei Ebenen mit dem Pseudoelement ::-webkit-progress-bar und dem Pseudoelement ::-webkit-progress-value, wobei die Ebene mit dem Fortschrittswert über der Ebene mit dem Fortschrittsbalken liegt. Zum Beispiel -

progress {
   position: absolute;
   height: 24px;
   width: 300px;
   border: 1px solid #fff;
}
progress::before {
   content: "Loading: " attr(value) "%";
   position: absolute;
   width: 100%;
   text-align: center;
   font-size: 18px;
   color: blue;
}
progress::-webkit-progress-bar {
   background-color: orange;
}
progress::-webkit-progress-value {
   background-color: red;
}

Im obigen Beispiel haben wir dem -Element ein ::before-Pseudoelement hinzugefügt. Der Fortschrittswert wird als Text oben in der Fortschrittsleiste angezeigt. Wir haben außerdem den Text in der Mitte des Fortschrittsbalkens korrigiert und seine Schriftgröße auf 18 Pixel eingestellt.

Beispiel 3

Hier ist das vollständige Codebeispiel zum Hinzufügen von Text zu einem Fortschrittsbalken.

   



   
Create progress with additional information bar Using CSS
   <progress value="30" max="100"></progress>

Fazit

Hier haben wir besprochen, wie Fortschrittsbalken ein wertvolles Werkzeug in der Webentwicklung sind. Es gibt den Nutzern Feedback zum Fortschritt der Arbeiten an der Website. Es kann auch an das Gesamtdesign der Website angepasst werden.

Das obige ist der detaillierte Inhalt vonWie stelle ich die Farbe eines Fortschrittsbalkens mithilfe von HTML und CSS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!