AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Avatar 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


Netbeans und GIT

Autor: Florian Müller


Technologie


Ich habe mich mal während der Arbeit mit Git mit den Git Hooks beschäftigt. Ziel war es, unnötige Builds in der Pipeline zu vermeiden, welche aufgrund von Lintern fehlschlagen. Dazu wollte ich einen Pre-Commit Hook einsetzen. Ein simpler Hook, welcher vor einem Commit ausgeführt werden sollte: Wenn man über die Command line commiten will, wird diese auch …


Beitrag lesen
21.
April
2017

Apple Touch Icons nutzen

Autor: Bastian Schwarz


Projekte // Technologie // User Experience & Design


Ich habe mal ein wenig recherchiert und möchte hier das Ergebnis mitteilen. Die Apple Touch Icons können generell benutzt werden um Apps oder Webseiten auf z.B. den Startbildschirm zu pinnen. Ist bei der Webseite dann ein solches Icon hinterlegt wird das „Lesezeichen“ mit ihm hinterlegt und man erhält so einen schönen Wiedererkennungswert. Generell sollten die …


Beitrag lesen
17.
Oktober
2012

CSS Selectors and Pseudo Selectors and browser support

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Eben bin ich auf eine interessante Seite zum Thema Selektoren in CSS gestoßen, die sehr übersichtlich auflistet was geht und was nicht und vor allem in welchen Browsern dies der Fall ist. Leider ist die Seite nicht mehr ganz aktuell, aber für einen schnellen Überblick sollte sie allemal ausreichen. Und mit etwas Glück kommt auch …


Beitrag lesen
17.
Februar
2012

video.js – HTML5-Video-Kmponente mit Polyfill für alte Browser

Autor: Stefan Oswald


Projekte // Technologie // User Experience & Design


Webseite: http://www.videojs.com/ Ich habe es mir noch nicht im Detail angeschaut, aber rein von der Beschreibung her könnte das für uns mal ganz nützlich sein. Man kann per API auch Loader für eigene Video-Provider umsetzen. Kostenlos einsetzbar dank Apache 2.0 Lizenz.


Beitrag lesen
14.
Mai
2013