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

html2canvas – Screenshots mit JavaScript Wenn man mal überlegt, womit sich man sich als Blogger so seine Zeit vertreibt, wird man auf eins sehr schnell kommen: Screenshots. Die kleinen Bieste...
Heatmap mit dem HTML5 Canvas Element Heatmaps sind sinnvolle kleine Helferlein bei der Analyse einer Webpage. Ich habe schon darüber berichtet wie man mit der Open Source Clickheat eine f...
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 ...
Datenvisualisierung in HTML5 mit HumbleFinance Fast jedes Trackingtool bzw. eCommerce-Paket visualisiert heutzutage Daten als Graphen. Dabei werden entweder Verkaufszahlen oder Besucherzahlen in ne...

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.