Wie erstelle ich einen Fortschrittsbalken in HTML?

Ein Fortschrittsbalken in HTML zeigt den Fortschritt jeder ausgeführten Aufgabe an. Im Allgemeinen werden diese Balken verwendet, um den Download- und Upload-Status anzuzeigen.

Die Fortschrittsbalken werden verwendet, um bestimmte Meilensteine ​​während einer Aufgabe auf einen bestimmten Prozentsatz festzulegen. Sie können einen Fortschrittsbalken in erstellen Das gibt den Abschlussfortschritt einer Aufgabe an. Der Wert des Fortschrittsbalkens kann mit JavaScript bearbeitet werden. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML, CSS und JavaScript in der folgenden Reihenfolge einen Fortschrittsbalken erstellen können:

Lass uns anfangen.



Wie erstelle ich einen Fortschrittsbalken in HTML?

Ein Fortschrittsbalken zeigt den Fortschritt jeder ausgeführten Aufgabe an. Im Allgemeinen werden diese Balken verwendet, um den Download- und Upload-Status anzuzeigen. Wir können sagen, dass Fortschrittsbalken verwendet werden können, um den Status von allem darzustellen, was gerade ausgeführt wird.

Ansible vs Chef vs Marionette

Fortschrittsbalken - Edureka

So erstellen Sie einen grundlegenden Fortschrittsbalken mit müssen folgende Schritte ausgeführt werden:

  • Erstellen Sie eine HTML-Struktur für Ihren Fortschrittsbalken - Der HTML Etikett Gibt einen Abschlussfortschritt einer Aufgabe an.
 
  • CSS hinzufügen - Der nächste Schritt besteht darin, die Hintergrundfarbe des Fortschrittsbalkens sowie den Fortschrittsstatus in der Leiste mit Hilfe von hinzuzufügen CSS .
#Progress_Status {Breite: 50% Hintergrundfarbe: #ddd} #myprogressBar {Breite: 1% Höhe: 35 Pixel Hintergrundfarbe: # 4CAF50 Textausrichtung: Mittellinienhöhe: 32 Pixel Farbe: Schwarz}
  • JavaScript hinzufügen - Der nächste Schritt besteht darin, eine dynamische animierte Fortschrittsleiste mit zu erstellen Javascript-Funktionen aktualisieren und Szene .
Funktionsaktualisierung () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (Szene, 10) Funktionsszene () {if (Breite> = 100) {clearInterval (Identität)} else {width ++ element.style.width = width + '%'}}}

Nachdem Sie nun die verschiedenen Schritte zum Erstellen eines Fortschrittsbalkens kennen, gehen wir weiter und sehen uns das vollständige Beispiel eines Fortschrittsbalkens an.

Fortschrittsbalken: Beispiel

Nachdem Sie die verschiedenen Schritte zum Erstellen eines Fortschrittsbalkens ausgeführt haben, können Sie HTML, CSS und verknüpfen JavaScript-Elemente . Das folgende Beispiel zeigt den vollständigen Fortschrittscode, der die oben genannten verknüpft HTML, CSS und JavaScript Codes:

#Progress_Status {Breite: 50% Hintergrundfarbe: #ddd} #myprogressBar {Breite: 2% Höhe: 20px Hintergrundfarbe: # 4CAF50}

Beispiel für einen Fortschrittsbalken mit JavaScript

Download-Status einer Datei:


Start Download Funktion update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (Szene, 10) Funktionsszene () {if (width> = 100) {clearInterval (Identität)} else {width ++ element.style.width = width + '%'}}}

Ausgabe:

Damit sind wir am Ende unseres Artikels angelangt. Ich hoffe, Sie haben die verschiedenen Schritte verstanden, die zum Erstellen eines Fortschrittsbalkens erforderlich sind.

Schauen Sie sich unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Diese Schulung vermittelt Ihnen Kenntnisse in der Arbeit mit Back-End- und Front-End-Webtechnologien. Es umfasst Schulungen zu Webentwicklung, jQuery, Angular, NodeJS, ExpressJS und MongoDB.

Hast du eine Frage an uns? Bitte erwähne es im Kommentarbereich dieses Blogs und wir werden uns bei dir melden.