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

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

Ajaxでロードしてる時のクルクルのあれをやってみた。

jquery css3

Ajax Style Loading Animation in CSS3 ( no Images ) - nikesh.me と言うものがあって、使ってみました。他にもCSS Load.net - Loading CSS spinners and bars generator for AJAX & JQueryここでスタイルとか設定出来たりするみたいですね。すばらしい。
で、これ使いたい場合って、Ajaxが前提じゃないですか、表示制御とか簡単にしたいよねってことでやってみたよ。(とりあえず、くるくるする1バージョンだけ対応してます。機会があったら他のも対応してみようと思います。)
使い方はこんな感じ。onloadで初期化して、ボタンを押すと表示されて、3秒後に消えます。

$(function() {
    $("#loading").loading();
    $("#button").click(function() {
        $("#loading").loading("show");
        setTimeout(function(){
            $("#loading").loading("hide");
        }, 3000);
    });
});

このsetTimeoutの中身をjqueryAjaxのsuccessの最後とかでやってあげればいいですね。今はオプションを第2引数のオブジェクトで指定可能で、initHideが初期化時に隠しておくかどうか、zindexはその名の通りを設定出来ます。
jQueryMobileでも同じように出来ました。

$("#sample").live("pagebeforecreate", function(event) {
    $("#loading").loading();
    $("#sampleButton").click(function() {
        $("#loading").loading("show");
        setTimeout(function() {
            $("#loading").loading("hide");
        }, 3000);
    });
});

実体はこんな感じです。
jquery.loading.js

(function($) {
    $.fn.loading = function(method, config) {
        var defaults = {
            initHide: true,
            zindex: 10
        };
        var options = $.extend(defaults, config);
        if (!method || method == "init" || options.method == "init") {
            return this.each(function(i) {
                var that = $(this);
                if (options.initHide) {
                    that.hide();
                }
                for (var i = 0; i < 8; i++) {
                    $("<div></div>").addClass("loadingbar").attr("id", "loadingbar" + i).appendTo(that);
                }
            });
        } else if (method == "show" || options.method == "show") {
            return this.each(function(i) {
                $(this).css({
                            "position": "absolute",
                            "top": (window.innerHeight / 2 - 50),
                            "left": (window.innerWidth / 2 - 50),
                            "z-index": options.zindex})
                        .fadeIn(method.showSpeed ? method.showSpeed : "normal");
            });
        } else if (method == "hide" || options.method == "hide") {
            return this.each(function(i) {
                $(this).fadeOut(method.hideSpeed ? method.hideSpeed : "normal", function() {
                    $(this).css({
                        "position": "static",
                        "z-index" : -1,
                        "top": "0px",
                        "left": "0px"
                    });
                });
            });
        }
        return this;
    };
})(jQuery);

jquery.loading.css

#loading {
    width: 100px;
    height: 100px;
    float: left;
    -webkit-transform: scale(0.6)
}
#loading div.loadingbar {
    -moz-border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    background-color: #efefef;
    height: 36px;
    width: 15px;
    float: left;
    -webkit-transform: scale(0.4);
    -webkit-animation-name: fade;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
}
#loading div#loadingbar0 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    margin-left: 1px;
    margin-top: 30px;
    -webkit-animation-delay: 0.3s;
}
#loading div#loadingbar1 {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    margin-left: -5px;
    margin-top: 3px;
    -webkit-animation-delay: 0.4s;
}
#loading div#loadingbar2 {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    margin-left: 12px;
    margin-top: -8px;
    -webkit-animation-delay: 0.5s;
}
#loading div#loadingbar3 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    margin-left: 14px;
    margin-top: 3px;
    -webkit-animation-delay: 0.6s;
}
#loading div#loadingbar4 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    margin-left: -4px;
    margin-top: 30px;
    -webkit-animation-delay: 0.7s;
}
#loading div#loadingbar5 {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    margin-left: 68px;
    margin-top: -8px;
    -webkit-animation-delay: 0.8s;
}
#loading div#loadingbar6 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    margin-left: -43px;
    margin-top: 2px;
    -webkit-animation-delay: 0.9s;
}
#loading div#loadingbar7 {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    margin-left: -72px;
    margin-top: -8px;
    -webkit-animation-delay: 1.0s;
}
@-webkit-keyframes fade {
    0%{background-color:#333;}
    100%{background-color:#efefef;}
}

loading.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ローディングサンプル</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="./js/jquery.loading.js"></script>
  <script type="text/javascript">
    (function() {
        $(function() {
            $("#loading").loading();
            $("#button").click(function() {
                $("#loading").loading("show");
                setTimeout(function(){
                    $("#loading").loading("hide");
                }, 3000);
            });
        });
    })();
  </script>
  <link rel="stylesheet" href="./js/jquery.loading.css"></link>
</head>
<body>
  <div id="content">
    <button id="button">ロード</button>
  </div>
  <div id="loading">
  </div>
</body>
</html>

CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery にあるパターンを網羅したらgithubに上げたいと思います。