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の中身をjqueryのAjaxの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);
#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に上げたいと思います。