Preloader-Grafik als Canvas-Element online erstellen

Jeder kennt sie, keiner stellt sie her: die netten rotierenden Kreise die von jeder Lightbox verwendet, oder auch bei Ajax-Aufrufen kurzzeitig eingeblendet werden. Die kleinen „Bitte-Warten“-Grafiken haben es nämlich in sich, da sie nicht einfach zu erstellen sind. Meistens handelt es sich um animierte GIFs die der geneigte Photoshop-Nutzer schon einmal gar nicht erstellen kann (wahrscheinlich denkt Adobe, man nimmt dafür am besten mal Flash).

Screenshot des CanvasLoader Creators

Der CanvasLoader Creator erstellt eine solche Grafik als Canvas-Element. Das würde einem im ersten Schritt nicht sonderlich weiterhelfen, dann ob ich ein GIF nicht editieren kann, oder ein Canvas-Element macht auf den ersten Blick kein Unterschied. Geschickterweise kann man auf der Webseite aber mit wenigen Klicks eine individuelle Preloader-Grafik erstellen. Form, Farbe und Geschwindigkeit sind problemlos beeinflussbar. Heraus kommt dabei ein individueller Aufruf des Javascriptes, das wiederum das Canvas-Element erstellt.

Natürlich ist es einfacher ein GIF als Preloader zu verwenden, aber soviel Unterschied zum Canvas-Element existiert dann auch nicht. Angeschaltet/Abgeschaltet werden müssen beiden, ein wenig positionieren, und fertig ist das Ganze. Nach meiner Meinung eine echt lohnenswerte Sache, wenn einem Design individualisierte Preloading-Grafiken hinzugefügt werden sollen. Dass diese dabei so schnell und einfach erstellt werden können, versüßt den Umstieg zusätzlich.

2 Kommentare

Schreibe einen Kommentar