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


PhotoSwipe: Responsive JavaScript Image Gallery

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Ich bin gestern auf eine ziemlich geniale Lightbox-Lösung gestoßen: PhotoSwipe. Diese baut auf Vanilla JS auf und ist auf hohe Performance und die mobile Verwendung ausgelegt, bei der ja doch ziemlich viele Lightboxen scheitern oder von uns sogar deaktiviert werden. Und trotz all dieser Features sind das Skript und die dazugehörigen Styles sehr klein was …


Beitrag lesen
22
SEP
16

CKEditor Update im imx.CMS

Autor: Bastian Schwarz


Technologie


Demnächst kommt ein neues Release mit der neuesten Version des CKEditors. Dabei wurde ein Update von 4.4.6 auf die aktuellste 4.6.2 durchgeführt. Zusätzlich wurde die Konfiguration etwas optimiert und neue Plugins für das Bearbeiten von Tabellen eingeführt. Die Funktionalität an sich hat sich dabei natürlich nicht geändert, aber es wurden wieder einige Bugs gefixt. Außerdem …


Beitrag lesen
28
FEB
17

Browser Diet

Autor: Benjamin Hofmann


Technologie


Eben bin ich über t3n auf eine interessante Website gestoßen: Browser Diet. Hier geht es darum, wie der Name bereits vermuten lässt, wie man Websites im Browser beschleunigen kann. Einiges davon machen wir bereits seit einiger Zeit, einiges nicht. Ein paar Beispiele dafür sind folgende Punkte: http://browserdiet.com/#cache-array-lengths Ein viel gemachter Fehler, auch in PHP, da …


Beitrag lesen
27
MRZ
13

Photoshop-Ebenenstile als CSS3-Code exportieren

Autor: Michael Degener


Technologie // User Experience & Design


Ob Designer oder Entwickler, jeder der schon einmal eine Screen-Vorlage mit all seinen Ebenen mittels HTML und CSS zum Leben erwecken musste, hat sich insgeheim sicherlich schon einmal gewünscht, dass sich dabei manche Arbeitsschritte beschleunigen ließen. Wer kennt sie nicht, die allgegenwärtigen Buttons in Formularen, Teasern und Schnellsuchen. Von runden Ecken über Konturen und Schlagschatten …


Beitrag lesen
03
AUG
12