Mach3.laBlog

実験室: 「Loading…」のドットアニメーションを表示するjQueryプラグイン

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

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

jquery.loadingdots.js

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

Loading.
Loading..
Loading…

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

使い方

表示させる

シンプルな例

$("#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アニメーションを使用した例も掲載されていました。
そちらも是非ご参考に。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*