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 Antworten auf „Preloader-Grafik als Canvas-Element online erstellen“

  1. Da muss ich Dir leider widersprechen, es ist sehr wohl möglich in Photoshop (und soweit ich weiss auch in Fireworks) animierte GIFs zu erstellen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.