Progress Bar ​

Die Progress Bar wird zur Anzeige eines begrenzten Fortschritts oder Ladevorgangs eingesetzt.

Overview ​

Intro ​

Die Progress Bar drückt eine deterministische (= begrenzte, ermittelbare) Wartezeit oder Dauer eines Vorgangs aus, d.h. die Fortschrittsrate des zugrundeliegenden Prozesses kann ermittelt werden.

Progress Bar

Verwendung ​

👍 Do👎 Don't
... wenn der Status von bereits laufenden Prozessen an Nutzer kommuniziert werden soll z.B. beim Abschicken eines Formulars, oder beim Speichern von Inhalten.... wenn Ladezeiten so gering sind, dass sie nicht vom Nutzer spürbar sind. ... wenn die Fortschrittsrate des zugrundeliegenden Prozesses indeterministisch ist, sie also nicht bestimmt werden kann. Nutze hierfür den Spinner.

Guidelines ​

Aufbau ​

Die Progress Bar besteht aus einer unteren und einer oberen Linie. Die untere Linie legt die Strecke fest auf der sich die obere Linie bewegen kann. Die obere Linie gibt den Fortschritt an.

Progress Bar

Bei deterministischer Verwendung (bestimmte Ladezeit)

Optional kann dem Nutzer bei der Progress Bar mit relevanten Informationen kommuniziert werden, was gerade im Hintergrund passiert (z.B. „Suche läuft“, „Suche nach Updates“). Auch hier kann die generische Formulierung „Bitte warten...” verwendet werden, um den Wartevorgang dadurch zu betonen. Die genaue Platzierung des Texts ist abhängig vom Anwendungsfall und muss vom UX Designer entschieden werden. In manchen Anwendungsfällen ist es auch möglich, dass keine sinnvolle Platzierung von Text möglich ist und er deswegen weggelassen wird.

Progress Bar

Verhalten ​

Bei der Progress Bar füllt sich die obere Linie entlang der Strecke von links nach rechts je nach Fortschritt des Prozesses mit Farbe auf.

Barrierefreiheit ​

Die Progress Bar ist barrierefrei. Dies wird sichergestellt durch die Verwendung der progressbar role und der Aria Attribute aria-valuenow , aria-valuemin und aria-valuemax , was ermöglicht, dass der Fortschritt von Screenreadern ausgelesen werden kann.

Mehr hierzu ist zu finden unter: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-progress-bar--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fprogress-bar

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-progress-bar-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.progressbar.ProgressBar;

Variants ​

Determinate ​

java
ProgressBar progressBar = new ProgressBar();
progressBar.setValue(0.5); // 50%

Indeterminate ​

java
ProgressBar progressBar = new ProgressBar();
progressBar.setIndeterminate(true);