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();☆結果
flugel.bizでご確認ください。
☆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();☆結果
flugel.bizでご確認ください。
その他のサンプルは jquery.cssloading.js | Archives | Flügel にて公開しています。
