201117Aug

Spin.js: Animation für Ajax-Preloader mit JavaScript

In der Welt der dynamischen Ajax-Anwendungen haben sich diverse Preloader-Grafiken bewährt, die dem Benutzer signalisieren, dass Inhalte nachgeladen werden. Zu dieser Thematik ist dem Entwickler Felix Gnass eingefallen, dass man derartige Loader-Animationen auch gänzlich ohne Grafiken und dafür mit JavaScript umsetzen könnte. Entstanden ist aus dieser Idee das Skript Spin.js, das für derartige Animationen eingesetzt werden kann.

Spin.js

Die JavaScript-Animation benötigt kein Framework und hat mit 2,8 KB eine kompakte Größe (1,7 KB mit GZip). Das Aussehen des Preloaders lässt sich beispielsweise auf der Website des Skripts per Online-Konfigurator anpassen. Zum Einsatz kommen CSS3 und die @keyframes-Regel, mit der sich CSS-Animation genau steuern lassen. Ein Fallback in Form von VML für Internet Explorer ist ebenfalls integriert.
Bei GitHub steht das Projekt wieder zum Download bereit. Aus semantischer Sicht sollten Animationen natürlich nicht über HTML-Elemente umgesetzt werden, aber mit JavaScript ist dieser Aspekt weniger tragisch anzusehen.