AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Stefan Oswald 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


Textfield-Resize des Browsers steuern

Autor: Axel Güldner


Technologie


Wer hat dieses Textfield-Resize eigentlich eingeführt? War es der Chrome der es das erste mal angeboten hat? War es der Safari? Egal, Apple oder Google, einer von beiden ist mit Sicherheit schuld. Aber Moment, wovon rede ich da eigentlich? Dem einen oder anderen, vielleicht ja auch jedem, ist evtl. aufgefallen, dass sich Textfields in Formularen …


Beitrag lesen
05.
April
2012

imx.Search: der neue ad-hoc Index-Update-Service

Autor: Marc Kurzmann


Technologie


Bisher war es bei imx.Search so, dass Änderungen in den Contents aus den Produkten nur nach einer kompletten Neu-Indizierung im Index verfügbar waren – üblicherweise über Nacht. Was für einen reinen Volltext-Suchmaschineneinsatz von imx.Search vielleicht noch akzeptabel ist, wenn Suchbegriffe mit einem Tag Verspätung gefunden werden, so ist es bei der Verwendung als Filter-Suchmaschine, so …


Beitrag lesen
03.
Dez.
2014

Webbrowser

Autor: Sascha Nützel


Technologie // User Experience & Design


Bei meinen Streifzügen durch das “Neuland” bin ich auf einen neuen Browser gestoßen: Blisk – dieser basiert auf Chromium und hält für uns Entwickler/Designer ein paar nette Features bereit (teils in näherer Zukunft). gleichzeitig Desktop / Mobile überprüfen Auto- Refresh nach Source- Change Analytics (JS Fehler, Pagespeed, Browser Kompatibilität) Screenshots Der erste Eindruck, auch ohne Beta- Features, …


Beitrag lesen
26.
Sep.
2016

Recap Velocity Conference Amsterdam 2016

Autor: Robert Klauser


Technologie // Über den Tellerrand


Nach drei spannenden Tagen von 7. bis 9. November 2016 in Amsterdam bin ich mit vielen neuen und interessanten Eindrücken von der Konferenz zurückgekehrt, die ich gerne mit Euch teilen möchte. Bei der Velocity Conference ging es um die Themen Web Performance in allen Facetten sowie DevOps als Prozess für den agilen und performanten Betrieb …


Beitrag lesen
11.
Nov.
2016