AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Datum: 23. Juli 2014
Autor: Stefan Oswald


Der Anwendungsfall tritt sehr oft ein: Eine Ergebnisliste soll nachgefiltert werden, und zur Visualisierung, dass gerade etwas im Hintergrund passiert, soll eine „Ladeschnecke“ (oder vielleicht etwas old-school-mäßig ein Fortschrittsbalken) angezeigt werden. Oftmals wird das so umgesetzt, dass man im „beforeLoad“-Ereignis des AJAX-Calls eine animierte Grafik hinzufügt, welche im „complete“-Ereignis wieder entfernt oder unsichtbar gemacht wird.

Der Nachteil an dieser Methode: Manchmal meint der Browser, dass er die Grafik nicht zu laden braucht, weil sie ja ursprünglich unsichtbar war oder gar nicht erst existiert hat. Oft kann man das durch einen harten Reload mit STRG+F5 oder dergleichen beheben, aber das nützt zumindest einem Endbenutzer, der über die Existenz der für ihn nicht sichtbaren Ladeschnecke ja gar keine Kenntnis hat, wenig. Es muss also eine weniger fehleranfällige Lösung her:

Tadaaaa: spin.js!

Das Tool ist in „reinem“ JavaScript geschrieben, also ganz ohne Abhängigkeiten zu jQuery oder anderen Frameworks. Es existiert jedoch ein jQuery-Plugin, mit dem man die an sich schon einfache Einbindung noch etwas einfacher machen kann. Erzeugt wird eine Ladeschnecke, die komplett durch JavaScript/CSS erzeugt wird. Es werden keine Grafiken oder zusätzlicher, eigener CSS-Code benötigt.

Die resultierende Ladeschnecke sieht zwar prinzipiell immer gleich aus: Einige abgerundete Balken, die als Kreis angeordnet zusammen liegen und im Uhrzeigersinn von weiß nach schwarz wechseln, um eine Bewegung anzudeuten. Allerdings ist es möglich, die Größe und das Animationsverhalten recht vielfältig anzupassen; auch die Farbe der Schnecke kann natürlich konfiguriert werden. Man hat also durchaus einige sinnvolle Anpassungsmöglichkeiten. Die prinzipielle Gleichartigkeit hat aber auch den Vorteil, dass es keine drölfzig völlig verschiedenen Schnecken-Layouts auf einer einzelnen Webseite gibt.

Das erste Portal, in dem spin.js benutzt wird, ist Niederösterreich.

Link zur Webseite:
http://fgnass.github.io/spin.js/

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Integrationskomponente imxTools Tag 2.2.0 released

Autor: Bastian Schwarz


Technologie


Heute wurden von mir, mit Vorarbeit von Bastian die Services zur Abfrage des Schneeforums bereitgestellt. Es wird als Erweiterung dazu bald noch Object-Wrapper geben, die im Portal dann verwendet werden. Diese Wrapperobjekte erfüllen zwei Ziele. Zum einen bieten sie einige Shortcuts (auf z.B. i18N-Objekte) und schon Funktionalitäten um konstante Stringwerte auf portalspezifische Resource-Keys zu mappen …


Beitrag lesen
25.
Nov.
2011

Erste Eindrücke von der WJAX2012

Autor: Christian Göbel


Technologie


Heute gab es im Dev-Meeting schon einige Eindrücke von der diesjährigen WJAX von mir zu hören. Diese Punkte möchte ich nun an dieser Stelle noch einmal kurz zusammenfassen. Neben Rucksäcken, T-Shirts und Kulis gab es auch dieses Jahr im Westin Grand Hotel in München wieder einige spannende Sessions. Vor der Eröffnung der eigentlichen Hauptkonferenz am …


Beitrag lesen
08.
Nov.
2012

Responsive Webdesign – Was hat das mit mir zu tun?

Autor: Axel Güldner


Projekte // Technologie // Über den Tellerrand // User Experience & Design


Das Thema Responsive Webdesign hat inzwischen jeden von uns, der mit offenen Augen durch das Internet läuft, mindestens einmal berührt. Quasi wie aus dem Nichts ist diese Disziplin über Nacht zum neuen Buzzword unter Webdesignern/Entwicklern und Marketingleuten geworden. Responsive Webdesign gilt einfach als sexy, auch wenn die eigentliche Idee dahinter nicht gerade neu ist. Jeder …


Beitrag lesen
18.
Januar
2012

bLazy.js

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Und schon wieder eine kleine Standalone-Vanilla-JS-Library, die ich am Wochenende entdeckt habe: bLazy.js (GitHub, Demo) In dem ca. 1,5 KB Skript befindet sich die komplette Logik, um Bilder erst dann zu laden wenn sie im Viewport angezeigt werden. Und nicht nur Bilder, sondern auch I-Frames und andere Embeds können dynamisch nachgeladen werden. Und es funktioniert …


Beitrag lesen
26.
Sep.
2016