Erstellen stilvoller und responsiver Fortschrittsbalken mithilfe von ProgressBar.js

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Nichts im Internet passiert sofort. Der einzige Unterschied besteht in der Zeit, die ein Prozess benötigt. Einige Prozesse können in wenigen Millisekunden passieren, während andere bis zu mehreren Sekunden oder Minuten dauern können. Sie können z. B. ein sehr großes Bild bearbeiten, das von Ihren Benutzern hochgeladen wurde, und dieser Vorgang kann einige Zeit in Anspruch nehmen. In solchen Fällen ist es eine gute Idee, die Besucher wissen zu lassen, dass die Website nicht irgendwo feststeckt, sondern tatsächlich an Ihrem Bild arbeitet und dabei Fortschritte macht.

Eine der häufigsten Methoden, um Lesern zu zeigen, wie weit ein Prozess fortgeschritten ist, ist die Verwendung von Fortschrittsbalken. In diesem Tutorial erfahren Sie, wie Sie die ProgressBar.js-Bibliothek verwenden, um verschiedene Fortschrittsbalken mit einfachen und komplexen Formen zu erstellen.

Erstellen eines einfachen Fortschrittsbalkens

Nachdem Sie die Bibliothek in Ihr Projekt aufgenommen haben, ist das Erstellen eines Fortschrittsbalkens mit dieser Bibliothek einfach. ProgressBar.js wird in allen gängigen Browsern unterstützt, einschließlich IE9+, was bedeutet, dass Sie sie in jeder Website verwenden können, die Sie erstellen. Sie können die neueste Version der Bibliothek von GitHub abrufen oder direkt einen CDN-Link verwenden, um sie in Ihrem Projekt hinzuzufügen.

Um unerwartetes Verhalten zu vermeiden, stellen Sie sicher, dass der Container der Fortschrittsleiste das gleiche Seitenverhältnis wie die Fortschrittsleiste aufweist. Bei einem Kreis sollte das Seitenverhältnis des Containers 1:1 sein, da die Breite gleich der Höhe ist. Bei einem Halbkreis sollte das Seitenverhältnis des Containers 2:1 sein, da die Breite doppelt so hoch ist. Ebenso sollte der Container bei einer einfachen Linie ein Seitenverhältnis von 100:strokeWidth für die Linie aufweisen.

Wenn Sie Fortschrittsbalken mit einer Linie, einem Kreis oder einem Halbkreis erstellen, können Sie einfach die ProgressBar.Shape()-Methode verwenden, um den Fortschrittsbalken zu erstellen. In diesem Fall kann die Form oder hier auch Shape ein Kreis, Circle, eine Linie, Line oder ein Halbkreis,SemiCircle, sein. Sie können zwei Parameter an die Shape()-Methode übergeben. Der erste Parameter ist ein Selektor oder DOM-Knoten, um den Container der Fortschrittsleiste zu identifizieren. Der zweite Parameter ist ein Objekt mit Schlüssel-Wert-Paaren, die das Aussehen des Fortschrittsbalkens bestimmen.

Sie können die Farbe der Statusleiste mithilfe der color-Eigenschaft angeben. Alle Fortschrittsbalken, die Sie erstellen, haben standardmäßig eine dunkelgraue Farbe. Die Dicke des Fortschrittsbalkens kann mithilfe der strokeWidth-Eigenschaft angegeben werden. Beachten Sie, dass die Breite hier nicht in Pixeln, sondern in Prozent der Leinwandgröße liegt. Wenn die Leinwand beispielsweise 200px breit ist, wird mit einem strokeWidth-Wert von 5 eine Linie erstellt, die 10px dick ist.

Neben der Hauptfortschrittsleiste können Sie in der Bibliothek auch eine nachfolgende Linie zeichnen, die den Lesern den Pfad zeigt, auf dem sich der Fortschrittsbalken bewegt. Die Farbe der Traillinie kann mit der trailColor-Eigenschaft angegeben werden, und ihre Breite kann mithilfe der trailWidth-Eigenschaft angegeben werden. Genau wie strokeWidth berechnet die trailWidth-Eigenschaft auch die Breite in Prozent.

Die Gesamtzeit, die der Fortschrittsbalken für den Übergang vom ursprünglichen Zustand in den endgültigen Zustand verwendet, kann mithilfe der duration-Eigenschaft angegeben werden. Standardmäßig wird die Animation einer Fortschrittsleiste in 800 Millisekunden abgeschlossen.

Sie können die easing-Eigenschaft verwenden, um anzugeben, wie eine Fortschrittsleiste während der Animation verschoben werden soll. Alle Fortschrittsbalken werden standardmäßig mit einer linearen Geschwindigkeit verschoben. Um die Animation attraktiver zu machen, können Sie diesen Wert auf etwas anderes wie easeIn, easeOut, easeInOut oder bounce festlegen.

Nachdem Sie die anfänglichen Parameterwerte angegeben haben, können Sie die Fortschrittsbalken mit der animate()-Methode animieren. Dieser Parameter akzeptiert drei Parameter. Der erste Parameter ist der Betrag, bis zu dem Sie die Fortschrittslinie animieren möchten. Die beiden anderen Parameter sind optional. Der zweite Parameter kann verwendet werden, um alle Animationseigenschaftswerte zu überschreiben, die Sie während der Initialisierung festgelegt haben. Der dritte Parameter ist eine Rückruffunktion, um etwas anderes zu tun, sobald die Animation endet.

Im folgenden Beispiel habe ich drei verschiedene Fortschrittsbalken mit allen Eigenschaften erstellt, die wir bisher besprochen haben.

var lineBar = new ProgressBar.Line('#line-container', {
    color: 'orange',
    strokeWidth: 2,
    trailWidth: 0.5
});

lineBar.animate(1, {
    duration: 1000
});

var circleBar = new ProgressBar.Circle('#circle-container', {
    color: 'white',
    strokeWidth: 2,
    trailWidth: 10,
    trailColor: 'black',
    easing: 'easeInOut'
});

circleBar.animate(0.75, {
    duration: 1500
});

var semiBar = new ProgressBar.SemiCircle('#semi-container', {
    color: 'violet',
    strokeWidth: 2,
    trailWidth: 0.5,
    easing: 'bounce'
});

semiBar.animate(1, {
    duration: 3000
});

Please accept marketing cookies to load this content.

Animieren von Textwerten mit dem Fortschrittsbalken

Das einzige, was sich mit der Animation der Fortschrittsbalken im obigen Beispiel ändert, ist ihre Länge. Mit ProgressBar.js können Sie jedoch auch andere physikalische Attribute wie die Breite und Farbe der Konturlinie ändern. In solchen Fällen müssen Sie die Anfangswerte für die Fortschrittsleiste innerhalb des from-Parameters und die endgültigen Werte innerhalb des Parameters to angeben, wenn Sie die Fortschrittsbalken initialisieren.

Sie können die Bibliothek auch anweisen, ein begleitendes Textelement mit der Statusleiste zu erstellen, um Ihren Benutzern einige Textinformationen anzuzeigen. Der Text kann alles sein, von einem statischen Wert bis zu einem numerischen Wert, der den Fortschritt der Animation angibt. Der text-Parameter akzeptiert ein Objekt als Wert.

Dieses Objekt kann über einen value-Parameter verfügen, um den initialen Text anzugeben, der innerhalb des Elements angezeigt werden soll. Sie können auch einen Klassennamen angeben, der dem Textelement mithilfe des Parameters className hinzugefügt werden soll. Wenn Sie einige Inlineformatvorlagen auf das Textelement anwenden möchten, können Sie sie alle als Wert des style-Parameters angeben. Alle Standardformatvorlagen können entfernt werden, indem der Wert von style auf null gesetzt wird. Es ist wichtig, sich daran zu erinnern, dass die Standardwerte nur gelten, wenn Sie keinen benutzerdefinierten Wert für eine CSS-Eigenschaft innerhalb von style festgelegt haben.

Der Wert innerhalb des Textelements bleibt während der gesamten Animation gleich, wenn Sie ihn nicht selbst aktualisieren. Glücklicherweise bietet ProgressBar.js auch einen step-Parameter, der verwendet werden kann, um eine Funktion zu definieren, die bei jedem Animationsschritt aufgerufen werden soll. Da diese Funktion mehrmals pro Sekunde aufgerufen wird, müssen Sie mit ihrer Verwendung vorsichtig sein und die Berechnungen darin einfach halten.

var lineBar = new ProgressBar.Line("#line-container", {
  strokeWidth: 4,
  trailWidth: 0.5,
  from: { color: "#FF9900" },
  to: { color: "#00FF99" },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '-30px',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

lineBar.animate(1, {
  duration: 4000
});

var circleBar = new ProgressBar.Circle("#circle-container", {
  color: "white",
  strokeWidth: 2,
  trailWidth: 25,
  trailColor: "black",
  easing: "easeInOut",
  from: { color: "#FF9900", width: 1 },
  to: { color: "#FF0099", width: 25 },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '45%',
      left: '42%',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

circleBar.animate(0.75, {
  duration: 1500
});

var semiBar = new ProgressBar.SemiCircle("#semi-container", {
  color: "violet",
  strokeWidth: 2,
  trailWidth: 8,
  trailColor: "black",
  easing: "bounce",
  from: { color: "#FF0099", width: 1 },
  to: { color: "#FF9900", width: 2 },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '45%',
      left: '50%',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

semiBar.animate(0.75, {
  duration: 2000
});

Please accept marketing cookies to load this content.

Erstellen von Fortschrittsbalken mit benutzerdefinierten Formen

Manchmal möchten Sie möglicherweise Fortschrittsbalken mit unterschiedlichen Formen erstellen, die dem Gesamtdesign Ihrer Website entsprechen. Mit ProgressBar.js können Sie Fortschrittsbalken mit benutzerdefinierten Shapes mithilfe der Path()-Methode erstellen. Diese Methode funktioniert wie Shape(), bietet jedoch weniger Parameter zum Anpassen der Fortschrittsleistenanimation. Sie können weiterhin einen duration- und easing-Wert für die Animation angeben. Wenn Sie die Farbe und Breite des Strichs animieren möchten, der zum Zeichnen des benutzerdefinierten Pfads verwendet wird, können Sie dies innerhalb der from- und to-Parameter tun.

Die Bibliothek bietet keine Möglichkeit, einen Trail für den benutzerdefinierten Pfad zu zeichnen, wie es für einfache Linien und Kreise der Fall war. Sie können den Trail jedoch relativ einfach selbst erstellen. Im folgenden Beispiel habe ich mithilfe der Path()-Methode einen dreieckigen Fortschrittsbalken erstellt.

Bevor wir den JavaScript-Code schreiben, müssen wir unseren benutzerdefinierten SVG-Pfad in HTML definieren. Hier ist der Code, den ich verwendet habe, um ein einfaches Dreieck zu erstellen:

1	<svg xmlns="https://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="300" height="300" viewBox="0 0 300 300">
2	<path d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="#ddd" stroke-width="1"/>
3	<path id="triangle" d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="blue" stroke-width="5"/>
4	</svg>

Sie haben vielleicht bemerkt, dass ich zwei verschiedene Pfadelemente erstellt habe. Der erste Pfad hat eine hellgraue Farbe, die wie der Weg wirkt, den wir mit einfachen Fortschrittsbalken im vorherigen Abschnitt gesehen haben. Der zweite Pfad ist der, den wir mit unserem Code animieren. Wir haben ihm eine id gegeben, die verwendet wird, um sie im JavaScript-Code unten zu identifizieren.

var path = new ProgressBar.Path("#triangle", {
  duration: 6000,
  from: {
    color: "#ff0000",
    width: 2
  },
  to: {
    color: "#0099ff",
    width: 10
  },
  strokeWidth: 4,
  easing: "easeInOut",
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
  }
});

path.animate(1);

Please accept marketing cookies to load this content.

Letzte Gedanken

Wie Sie in diesem Tutorial gesehen haben, können Sie mit ProgressBar.js ganz einfach verschiedene Arten von Fortschrittsbalken erstellen. Es gibt Ihnen auch die Möglichkeit, verschiedene Attribute der Fortschrittsleiste wie seine Breite und Farbe zu animieren.

Nicht nur das, sondern Sie können diese Bibliothek auch verwenden, um den Wert eines begleitenden Textelements zu ändern, um den Fortschritt in Textform anzuzeigen. Dieses Tutorial behandelt alles, was Sie wissen müssen, um einfache Fortschrittsbalken zu erstellen. Sie können jedoch die Dokumentation durchgehen, um mehr über die Bibliothek zu erfahren.

Wenn es etwas gibt, das Sie möchten, dass ich in diesem Tutorial klarstellen, zögern Sie nicht, mich in den Kommentaren wissen zu lassen.