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.

Ähnliche Beiträge

Paper.js – Vektorgrafiken in Javascript mitt... Es tauchen in letzter Zeit immer mehr Frameworks auf, die auf die eine oder andere Art und Weise versuchen, dem Webentwickler das Leben mit dem HTML5 ...
HTML5 Cheat Sheets Ok, es sind nur zwei, aber mehr braucht man auch (erstmal) nicht ;) HTML5 bietet viele neue Möglichkeiten, die nicht nur Videos und Audio betreffen, s...
Icon-Editor in HTML5 – Der x-icon-editor Windows und das Favicon – zwei Welten treffen sich! ;) Die Web-Entwicklung befindet sich so lange in ruhigen Bahnen bis ein Kunde auf die Idee kommt e...
HTML5 Canvas Cheat Sheet Kurz und schmerzlos: heute gib es ein Cheat Sheet für das HTML5 Canvas-Element, das als PDF oder als PNG heruntergeladen werden kann. Auch wenn es mir...

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.