Loadergenerator6

Ajaxを使ってAPIの返りを待つ際、ローディング画像があるかないかで体感時間は大きく変わってきます。

こんな画像のことですね。↓↓

loading

どうせローディング画像を実装するならデザインにマッチした完全オリジナルのものを作りたいですよね。

そんなときに便利なウェブサービスがあったのでご紹介します。

ローディング画像をサクッとつくれる「Loader Generator」

Thumbnail Loader Generator - Ajax loader

Loader Generatorの使い方はちょー簡単。つまみとスイッチをちょいといじることで簡単にオリジナルのローディング画像をつくることが出来てしまいます。↓↓

Loadergenerator7

つまみの意味は以下の通りです。

  • Sizeはローディング画像の大きさを指定出来ます。
  • Linesはローディングの中の線の数を指定できます。
  • Speedは、ローディングが廻るスピードを指定出来ます。
  • Line Colorはローディング画像の色を指定出来ます。
  • Background colorは、ローディング画像の背景。
  • Rounded Backgroundは、YESにすると背景を角丸にすることが出来ます。

ちなみに上のLine、Circle、Arrow、Snake、Pulsate、Wifi、Rectangleはローディング画像のスタイルですね。以下のようなスタイルにもすることができます。↓↓

【Snake】

Loadergenerator2

【Circle】

Loadergenerator1

ちなみに作ったローディング画像は「DOWNLOAD GIF」ボタンをタップして、上に表示されるローディング画像をクリックして↓↓

Loadergenerator4

このような画面になったらcommand + Sを叩くことで保存できます。↓↓

Loadergenerator0

あとがき

するぷ

このサービスは、このまえ作った「Movable Type 6のData APIを使ってカンタンに無限スクロールを実装できるJavascript」で初めて使ってみたのですが非常に便利でした。

きっとAjax使いの方は覚えて損はないと思うのでぜひブクマしておいてはいかがでしょうか。

png版ないかなぁと思ったけど、存在しないようです。アニメーションpngってまだまだハードル高いんですね。