QA@IT

Ajaxの待ち状態を表示する"クルクル画像"でフリーの良いヤツはありませんか?

5237 PV

Ajaxの待ち状態を表示する"クルクル画像"でフリーの良いヤツはありませんか? サイズを指定して生成してくれたりするとベターですが。オススメを教えて下さい!

回答

画像ではないのですが、JavaScriptのライブラリでspin.jsというのがあります。これを使えば、簡単に様々な大きさや色のクルクルを表示することができます。

https://github.com/fgnass/spin.js

用法は、

new Spinner({color:'#fff', lines: 12}).spin(target);

という感じで、本家のサイトに行けば、インタラクティブに大きさや回転速度を変えてパラメータ設定ができます。実際のクルクル画像の実装はCSSですが、IEではVML (IE版のSVGみたいなもの) にフォールバックもしてくれます。

Ruby on Rails なら、 spinjs-railsというのもあって、これを使えば導入は以下のように、さらに手軽。

gem 'spinjs-rails'
// application.js
//= require spin
$(".abc").spin(); // Shows the default spinner
$(".abc").spin(false); // Hide the spinner
編集 履歴 (2)
  • ありがとうございます。用法を追記しました -
  • 上のようにjQueryプラグインとして使いたい場合は、
    「//= require jquery.spin」でないといけないようです。
    -

ロード中の画像を生成できる Preloaders.net というサイトがあります。

Preloaders.net - Loading GIF & APNG (AJAX loaders) generator

サイズの指定もできますし、画像の種類も豊富(クルクルだけでなく!)で色も指定できたりするので、なかなか便利なサービスだと思います。

編集 履歴 (0)
  • おお、これもいいですね。地球儀が回ってどないするねんというヤツもありますが、アイコンのバリエーションが豊富! ありがとうございます! -

Ajaxload - Ajax loading gif generator で任意のサイズのものを生成できます (spin.js は小さいサイズのとき使いにくい)。ライセンスがイマイチ不明なのでお仕事にはちょっと使えないかもですが。

編集 履歴 (0)
  • いちおう、 Generated gifs are totally free for use と書いてはあるようですね -
ウォッチ

この質問への回答やコメントをメールでお知らせします。