Spinner

Der Spinner wird zur Anzeige eines unbestimmten Fortschritts oder Ladevorgangs eingesetzt.

Overview

Intro

Der Spinner bildet eine indeterministische (= unbestimmte, nicht ermittelbare) Ladezeit ab und wird bei unspezifischer Wartezeit oder Dauer eines Vorgangs eingesetzt.

Spinner

Verwendung

👍 Do	👎 Don't
... wenn die Fortschrittsrate des zugrundeliegenden Prozesses indeterministisch ist, sie also nicht bestimmt werden kann, oder wenn es nicht nötig ist, anzuzeigen, wie lange ein Prozess dauert.	... wenn die Fortschrittsrate des zugrundeliegenden Prozesses ermittelt werden kann. Nutze hierfür die Progress Bar.

Hinweis

Die minimal zu verwendende Größe des Spinners beträgt 24px24px (circular-minimum-size token). Die maximale Größe beträgt 100px100px (circular-maximum-size token).

Guidelines

Aufbau

Der Spinner zeigt den Fortschritt einer Aktion durch eine Animation der Anzeige entlang einer Kreisbahn an.

Spinner

Bei indeterministischer Verwendung (unbestimmte Ladezeit)

Wenn möglich, soll dem Nutzer beim Spinner mit relevanten Informationen kommuniziert werden, was gerade im Hintergrund passiert (z.B. „Suche läuft“, „Suche nach Updates“). Des Weiteren kann auch die generische Formulierung „Bitte warten...“ verwendet werden, da diese trotzdem besser ist als gar keine Information an den Nutzer. 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.

Spinner

Verhalten

Die Animation der Kreisbahn beim Spinner erfolgt im Uhrzeigersinn. Dabei dreht sich die gefüllte Fläche entlang der Kreisbahn.

Sonderfall: Verwendung als blockierender Spinner

Beispiel blockierender Spinner

Wenn der Nutzer während der Ladezeit die Benutzeroberfläche nicht bedienen können soll, kann der Spinner auch als blockierender Spinner eingesetzt werden. Dies ist z.B. beim Wechsel von Seiten der Fall bei denen das iFrame neu lädt.

Barrierefreiheit

Der Spinner 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

<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-spinner-flow</artifactId>
</dependency>

Import

import de.mate_ds.flow.component.spinner.Spinner;

Variants

Default

Spinner spinner = new Spinner();

Custom Size

Spinner spinner = new Spinner();
spinner.setSize("48px");