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/
Vom KI-Textgenerierungsmodul, über Jobscheduling bis hin zu OAuth Integration und asynchrone Aktionen. Es gibt wieder…
Wie können wir Schülerinnen und Schüler für die Informatik begeistern – und ihnen spannende berufliche…
Was ist AR,MR,VR und XR? Und wie ist es selber in der virtuellen Welt zu…
Vergangene Woche fand unser jährliches Netzwerk-Event der imx.Daten-und Serviceplattform statt. So viel sei vorab gesagt…
imx.Platform-Kunden nutzen bereits seit einigen Jahren Services aus dem Bereich der Künstlichen Intelligenz (KI), wenn…
Wie geht man am besten an einen Blogbeitrag über den Jahresauftakt #imxkickoff2024 des infomax-Teams vergangene…