読者です 読者をやめる 読者になる 読者になる

ゆたんぶろぐ

気が向いたら書いてます

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 にて公開しています。