この記事は賞味期限切れです。（更新から1年が経過しています）

Loading Dots jQuery Plugin | CSS-Tricksを受けて、
少しカスタマイズの効く形の物がほしいな、と思い書いてみました。
テキストだけのアニメーションもシンプルで良いですね！

jquery.loadingdots.js

要するに、こんな感じにドットがアニメーションします。

Loading.
Loading..
Loading…

CSS-Tricksのスクリプトはスピードとドットの最大数がオプションで渡せましたが、
それらに加えて「Loading」の文字とドットの文字、
文字のスタイルを渡せるようにしてみました。

• DEMO ( on JS Bin)
• Download : jquery.loadingdots.zip

使い方

表示させる

シンプルな例

$("#loadingArea").loadingdots();

オプションを渡す例

$("#loadingArea").loadingdots({
    content:"LOADING",
    css:{
        fontWeight:"bold",
        color:"#336699"
    }
});

止め方

$("#loadingArea").loadingdots( "stop" );

もしくは

$("#loadingArea").loadingdots( { mode : "stop" } );

オプション

mode : String = “start”

startまたはstopを受け取って処理をスイッチします。

maxDots : Number = 4

ドットの最大数

speed : Number = 400

スピード（ミリ秒）

content : String = “Loading”

表示する文字列

dotString : String = “.”

アニメーションする文字

css : Object = { }

CSSを格納したオブジェクトリテラル

Loading Dots jQuery Plugin | CSS-Tricks の元記事では、
CSS3のWebKitアニメーションを使用した例も掲載されていました。
そちらも是非ご参考に。