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


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...


Datenvisualisierung in HTML5 mit HumbleFinance
Fast jedes Trackingtool bzw. eCommerce-Paket visualisiert heutzutage Daten als Graphen. Dabei werden entweder Verkaufszahlen oder Besucherzahlen in ne...


Wasserzeichen mit JavaScript und dem Canvas-Elemen...
Angenommen man besitzt einen Shop, angenommen man verkauft tausende Artikel die vom gleichen Großhändler kommen. Der Großhändler besitzt natürlich kei...


HTML5 Canvas in einfach – KineticJS
Ich bin immer wieder erstaunt darüber was mit dem Canvas-Element alles möglich ist, meistens bin ich auch erstaunt darüber welcher Aufwand dazu betrie...

Kommentare

  1. Autor
    des Beitrages
  2. Ralf

    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.