CSS3 によるローディングアニメーションを生成する jQuery プラグイン jquery.cssloading.js をリリースしました

CSS3 によるローディングアニメーションを生成する jQuery プラグインを作ってみました。iOS や Android といった、スマートフォン用のプラグインという位置づけです。cssloading() でアニメーション開始、stopcssloading() でアニメーション停止を行います。アニメーションの形やスピードなどは、プロパティを与えて設定します。
GitHub: jquery.cssloading.js

☆確認環境
iOS/Android

☆プロパティ一覧

• type：アニメーションの形（dot/line/square/block/eddy）
• width：表示されるアニメーションのサイズ（数値）
• color：色（CSSで定義できる値）
• size：表示されるひとつひとつのサイズ（数値）
• items：表示されるアイテムの数（数値、「type」が「dot」の場合は円を構成する数、それ以外は1行の数）
• speed：アニメーションのスピード（ミリ秒）
• clockwise：右回りか左回りか（「true」が右回り、「false」が左回り）
• direction：アニメーションを行う起点の方向（「left」「right」「top」「bottom」）
• shape：表示されるひとつひとつの形（「circle」「square」）

☆使用できるプロパティの種類

• dot：direction/shape以外
• line：width/clockwise以外、「direction」は「left」または「right」
• square：width/direction以外
• block：width/clockwise以外
• eddy：width/direction以外

☆ファイルの読み込み

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='jquery.cssloading.min.js'></script>


☆html

<button>Play/Stop</button>
<div id='loading'></div>


☆JavaScript（dot）

// 開始
var option = {
  type: 'dot',
  width: 100,
  color: 'rgba(0, 102, 255, .9)',
  size: 3,
  items: 30,
  speed: 1000,
  clockwise: false
};
$('#loading').cssloading(option);

// 終了
$('#loading').stopcssloading();


☆結果
サンプルページ

☆JavaScript（line）

// 開始
var option = {
  type: 'line',
  color: 'rgba(255, 255, 255, .9)',
  size: 5,
  items: 10,
  speed: 1000,
  direction: 'left',
  shape: 'square'
};
$('#loading').cssloading(option);

// 終了
$('#loading').stopcssloading();


☆結果
サンプルページ

その他のサンプルは jquery.cssloading.js | Archives | Flügel にて公開しています。