Loader informieren den Nutzer über gerade stattfindende Lade- oder Rechenprozesse des Systems. Dabei kann der Fortschritt konkret angezeigt oder über die Darstellung einer sich wiederholenden Animation als undefiniert kommuniziert werden.

Die Größe der Loader-Komponenten ist abhängig von der jeweils verwendeten Basisschriftgröße gestaltet, die sich der jeweiligen Viewportbreite anpassen kann. Dementsprechend ist die Größe der Komponenten flexibel. Sie stehen in dunkler und heller Version zur Verfügung.

Spinner

Der Spinner wird eingesetzt, wenn der Ladefortschritt des Systems bestimmbar ist.

HTML
<div class="aui-spinner aui-js-spinner aui-spinner--progress"></div>

Continuous Spinner

Continuous Spinner werden eingesetzt, wenn der Ladefortschritt unbestimmt ist. Sie signalisieren dem Nutzer durch eine kontinuierliche Bewegung, dass das System die Eingabe verarbeitet.

HTML
<div class="aui-spinner aui-js-spinner aui-spinner--continuous"></div>

Progress Bar

Die Progress Bar wird in Einzelfällen eingesetzt, wenn Content und der bestimmbare Ladefortschritt des Systems gleichzeitig in einer View dargestellt werden sollen.

HTML
<div class="aui-progress aui-js-progress"></div>

Continuous Progress Bar

Die Continuous Progress Bar wird in Einzelfällen eingesetzt, wenn Content und der unbestimmbare Ladefortschritt des Systems gleichzeitig in einer View dargestellt werden sollen.

HTML
<div class="aui-progress aui-js-progress aui-progress--continuous"></div>
Audi UI Kit Sketch
Version 1.4 (Releases: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB

Anwendungsbeispiele

Dos & Don’ts

Um den Ladevorgang in den Fokus des Nutzers zu rücken wird der Hintergrund mit 90% Schwarz abgedunkelt.
Continuous Progress Bar nicht zur Visualisierung des Ladevorganges eines Videos verwenden. Hierfür eignet sich der Spinner.
Ein Loader sollte nicht willkürlich eingesetzt werden. Beispielsweise eignet sich der Spinner nicht zur Visualisierung von Seitenloads.
Loader nicht auf Rot platzieren.