Loaders inform the user of loading or computing processes being carried out by the system. The progress can either be displayed with specific details or communicated as undefined by means of a repeated animation.

The size of the loader components depends on the basic type size used, which can adapt to the viewport width in question. As such, the size of the components is flexible. They are available in a dark and a light version.

Spinners

The spinner is used when the system’s loading progress can be determined.

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

Continuous Spinners

Continuous spinners are used when the loading progress cannot be determined. They indicate to the user by means of a continuous movement that the system is processing the entry.

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

Progress Bar

The progress bar is used in individual cases when the content and the definable loading progress of the system are to be displayed in a view at the same time.

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

Continuous Progress Bar

The continuous progress bar is used in individual cases when the content and the indefinable loading progress of the system are to be displayed in a view at the same time.

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

Examples

Dos & Don’ts

In order to shift the user's focus to the loading progress, the background is darkened with 90% black.
Don’t use the continuous progress bar to visualise the loading process of a video. The spinner is suitable for this purpose.
A loader should not appear arbitrary. The spinner is not suitable for visualising page loads, for example.
Don't place the loader against a red background.