Trobber

Was ist ein Throbber?

Ein Throbber (vom Englischen throbber – Pulsation, Schlagen) ist ein animiertes grafisches Element, das als Indikator für die Ausführung von Hintergrundaktionen dient, wie z.B. das Laden von Inhalten, das Ausführen von Aufgaben oder das Ausführen von Befehlen. Dieses Element kann auf Webseiten, in Anwendungen oder Computerprogrammen verwendet werden. Ein klassisches Beispiel für einen Throbber ist ein rotierender Kreis, der im Browser anstelle des Favicon angezeigt wird, während eine neue Webseite geladen wird. Solche Indikatoren sind fast immer auf den Tabs von Browsern vorhanden.

Merkmale des Throbbers

Der Throbber, auch bekannt als asynchroner Fortschrittsindikator, ist eine Art Preloader. Im Gegensatz zu einem Fortschrittsbalken, der den Prozentsatz der Fertigstellung oder die verbleibende Zeit anzeigt, zeigt der Throbber lediglich an, dass der Ladevorgang fortschreitet. Er hat oft pulsierende Konturen, die einen visuellen Effekt erzeugen, der auf die Unvollständigkeit des Prozesses hinweist. Daher wird der Throbber manchmal auch als Pulsator bezeichnet.

Wozu braucht man einen Throbber?

Die erste Verwendung eines Throbbers fand Anfang der 1990er Jahre im Webbrowser NCSA Mosaic statt, der die Grundlage für Internet Explorer bildete. Die Entwickler führten einen pulsierenden Aktivitätsindikator ein, um den Benutzern mitzuteilen, dass der Browser arbeitet und die Seiten geladen werden. Die Hauptaufgabe des Throbbers besteht darin, dem Benutzer zu zeigen, dass das Programm nicht eingefroren ist, sondern weiterhin Aktionen ausführt.

Zusätzliche Funktionen

Neben der Information über den Ladevorgang verbessert der Throbber das Benutzererlebnis auf der Webseite oder in der Anwendung. Während des Ladens von Inhalten wie Stilen, Schriftarten und Bildern können Elemente ungleichmäßig geladen werden. Der Throbber verbirgt diese unschönen Momente, damit der Benutzer keine leeren oder fehlerhaft angezeigten Elemente sieht. Außerdem kann der Throbber:

• Benutzer halten, indem er Aufmerksamkeit auf eine kreative Animation lenkt.
• Von der Wartezeit ablenken, indem er den Eindruck eines schnellen Fortschritts erweckt.
• Die Markenbekanntheit durch Logos oder einzigartige Beschriftungen steigern.

Wo wird ein Throbber verwendet?

Ein Throbber erscheint in Fällen, in denen das Laden einer Webseite länger dauert als erwartet oder wenn es keine Antwort vom Server gibt. Sie können das Ladezeichen an folgenden Orten sehen:

• Auf dem Tab der Webseite im Browser.
• In der Adressleiste des Browsers.
• Auf dem Bildschirm während des Ladens der Seite.
• Auf langsam ladenden Elementen wie Bildern oder Videos.
• In mobilen Anwendungen und Programmen.

Der Throbber kann die Ressource vollständig verbergen oder Interaktionen damit ermöglichen, z.B. das Laden abbrechen oder zur Startseite zurückkehren. Wenn die Ressource vollständig verborgen ist, bleibt dem Benutzer nur das Warten auf das Ende des Ladevorgangs.

Varianten der Darstellung eines Throbbers

Bei der ersten Verwendung in Webbrowsern hatten Throbber die Form eines animierten Logos des Programms, und dies bleibt bis heute eine beliebte Methode. Später trat ein sich drehendes ringförmiges Symbol auf, das als Spinner bekannt ist und in verschiedenen Stilen visualisiert werden kann, je nach Corporate Design des Unternehmens und dem Design der Webseite.

Zu den grundlegenden Anforderungen an die Ladeanimation gehört deren Dynamik. Die häufigsten Varianten von Preloadern umfassen:

• Blinkende Punkte in Form eines Kreises.
• Wechselnde Symbole in Konsolenprogrammen.
• Animierte GIFs oder CSS-Animationen.

Wie man einen Throbber ohne Programmierkenntnisse zur Webseite hinzufügt

Um eine Ladeanimation auf Ihre Webseite zu integrieren, müssen Sie kein Programmierer sein. Es gibt mehrere einfache Möglichkeiten:

Spezielle Dienste

Verwenden Sie Online-Dienste, die es ermöglichen, eine Ladeanimation zu erstellen oder herunterzuladen und den Code zum Einfügen zu generieren. Beispiele für solche Dienste:

• Preloader-Builder von Hello-site.ru.
• Codepen.
• Loading.io.
• Svgator.
• CSS Loader Generator.

Nach der Erstellung der Animation kopieren Sie einfach den erhaltenen HTML- oder CSS-Code.

Plugins für WordPress

Für Webseiten auf WordPress sind spezielle Plugins verfügbar, wie LoftLoader, WP Smart Preloader oder „Preloader“. Nach der Installation und Aktivierung des Plugins müssen Sie lediglich das gewünschte Design auswählen und das Element anpassen.

Integrierte Funktionen von Website-Buildern

Einige Website-Builder bieten integrierte Funktionen zum Hinzufügen von Throbblern oder Ladeanimationen. Zum Beispiel kann man in Tilda das Element „Mikroanimation“ verwenden, indem man den Block „T228“ oben auf der Seite hinzufügt.