AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Datum: 23. Juli 2014
Autor*in: 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


WJAX 2018 – Angular, Java 11 und ein wenig ML

Autor*in: Magdalena Piller


Technologie


Im November war ich mal wieder auf der WJAX und habe mir den „Angular-Day“ herausgesucht, also ein kompletter Tag rund um Angular. Aber auch ein paar andere Themen versprachen Interessantes. In der Keynote mit dem Titel „Trust and Confidence through Chaos“ präsentierte Russ Miles seine Variante des Chaos Engineerings ganz nach dem Motto „Umarme Deinen …


Beitrag lesen
28
DEZ
18

Sofort und per Klick: Die neue Tourism Tech Alliance (TTA) vereinfacht den Datenaustausch für Destinationen

Autor*in: Christine Pfleger


infomax   //   Strategie & Konzeption   //   Technologie   //   Tourismus   //   Über den Tellerrand


Die Partner der Tourism Technology Alliance (TTA)
Die Partner der Tourism Technology Alliance (TTA)

Touristische Informationen einfach und plattform-übergreifend dort verfügbar machen, wo sie gebraucht werden: Dieses Ziel steht hinter dem Zusammenschluss der führenden Innovatoren im Bereich Travel Technology zur Tourism Tech Alliance (TTA). Ab sofort ist zwischen den Systemen der Partner ein Konnektor verfügbar, der einen einfachen und bedarfsgerechten Standard-Datenaustausch ermöglicht.


Beitrag lesen
21
OKT
22

iOS Probleme mit transition

Autor*in: Florian Müller


Technologie // User Experience & Design


Heute ist mir bei einem Projekt ein Problem mit iOS begegnet. Es gibt eine Galerie, bei welcher die Elemente von oben „hereinfliegen“. Auf dem iPad und dem iPhone war dieser Effekt kaum beziehungsweise gar nicht vorhanden, sondern das Bild war einfach *plopp* da. Problem hierbei ist, dass transitions bei iOS ohne Hardware Beschleunigung gerendert werden. …


Beitrag lesen
28
SEP
16

Erkenntnisse der IPC 2011

Autor*in: Benjamin Hofmann


Projekte // Technologie // User Experience & Design


Bevor ich lange im Developer Meeting etwas erzähle, was dann sowieso nur wieder in Vergessenheit gerät, dachte ich mir meine Erkenntnisse von der IPC 2011 in Mainz einfach hier niederzuschreiben. Dauerhaft für alle von uns sichtbar und mit einer Möglichkeit Fragen zu stellen. Hier also meine Top 7 (unsortiert) der Dinge, die ich interessant fand …


Beitrag lesen
08
DEZ
11