今回公開したLoadingメーカーはとてもシンプルで、直感的に操作できますので、上のリンクからまずは利用をしてみてください。
Loadingメーカーページの中ほどにある、薄緑の背景の部分がメーカー本体です。
左側でLoadingのタイプ、右側でサイズ・色・アニメーションのスピード・テキスト(テキストをアニメーションするタイプのみ)を設定できます。
これらをクリックで設定すると、左下にあるプレビューが随時変更されます。気に入ったデザインが見つかったら、プレビューの下にあるCSS・HTML・IE9のコードをコピーしてください。
コード内のクラス名は、右側の「クラス名」欄で変更できます。
Loadingメーカーを使って生成したコードの使い方を例示します。
まず、Loadingメーカーで以下のようにコードを生成します。
span.loading03, span.loading03:after {
display: inline-block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-image:
-webkit-gradient(radial,1 center,0,1 center,1,from(#de3b0a),color-stop(0.5,#de3b0a),color-stop(0.9,transparent),to(transparent)),
-webkit-gradient(radial,center 1,0,center 1,1,from(#de3b0a),color-stop(0.5,#de3b0a),color-stop(0.9,transparent),to(transparent)),
-webkit-gradient(radial,19 center,0,19 center,1,from(#de3b0a),color-stop(0.5,#de3b0a),color-stop(0.9,transparent),to(transparent)),
-webkit-gradient(radial,center 19,0,center 19,1,from(#de3b0a),color-stop(0.5,#de3b0a),color-stop(0.9,transparent),to(transparent));
background-image:
-webkit-radial-gradient(10% 50%, 1px 1px, #de3b0a, #de3b0a 95%, #de3b0a 95%, transparent),
-webkit-radial-gradient(50% 10%, 1px 1px, #de3b0a, #de3b0a 95%, #de3b0a 95%, transparent),
-webkit-radial-gradient(90% 50%, 1px 1px, #de3b0a, #de3b0a 95%, #de3b0a 95%, transparent),
-webkit-radial-gradient(50% 90%, 1px 1px, #de3b0a, #de3b0a 95%, #de3b0a 95%, transparent);
background-image:
radial-gradient(1px 1px at 10% 50%, #de3b0a, #de3b0a 95%, transparent),
radial-gradient(1px 1px at 50% 10%, #de3b0a, #de3b0a 95%, transparent),
radial-gradient(1px 1px at 90% 50%, #de3b0a, #de3b0a 95%, transparent),
radial-gradient(1px 1px at 50% 90%, #de3b0a, #de3b0a 95%, transparent);
}
span.loading03 {
position: relative;
margin: 0 10px;
vertical-align: middle;
-webkit-animation: animation03 2s linear infinite;
animation: animation03 2s linear infinite;
}
span.loading03:after {
position: absolute;
content: " ";
left: 0;
top: 0;
margin: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@-webkit-keyframes animation03 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes animation03 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<span class="loading03"><span></span></span>
<!--[if lte IE 9 ]>
<style type="text/css">
span.loading03:after {
display: inline-block;
content: "loading";
left: 0;
right: 0;
top: 50%;
width: auto;
height: auto;
margin: 0;
padding: 0;
background-color: transparent;
border: none;
text-align: center;
line-height: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
span.loading03:before, span.loading03 span {
display: none !important;
}
</style>
<![endif]-->
「CSS」欄のコードはstyleタグ内か、外部のスタイルシート内にコピーします。
「IE9以下用」欄のコードは、皆様のターゲットユーザーやアクセシビリティのポリシーによって要否が変わります。必要な場合(IE9以下のユーザーを利用者に含む場合)は、このコードをheadタグ内の末尾に設置してください(「CSS」欄のコードの後に設置するように注意してください)。
HTMLはloadingを実際に表示したい場所にコピーして設置しますが、必要な時(読み込み中・送信中など)に表示するためには、下記のようにJavascript(jQuery使用)などで設置することになります。
var loading_on = function(form_button) {
$(form_button).attr("disabled", "disabled").after("<span class=\"loading31\"><span></span></span>");
};
var loading_off = function(form_button) {
$(form_button).removeAttr("disabled").next("span.loading03").remove();
};
var hoge = function(form_button) {
loading_on(form_button);
$.ajax( {
"url": "",
"complete": function() {
loading_off(form_button);
}
} );
};
上の例では、あるボタンに設置したonclick="hoge(this)"から、クリック時にhoge関数が呼ばれ、jQuery.ajax通信中にボタン後ろにloadingが表示されます。
下のボタンをクリックしてお試しください(2秒後にloading_offになります)。
次の例では、画面をブラックアウトさせて、操作を受け付けないことをアピールしながら読み込み中を表示します。
Javascriptは上の例とほぼ同一です。spanタグのloadingをdiv#blindという要素で囲み、これをbodyタグに設置しています。
var loading2_on = function() {
$(document.body).append("<div id=\"blind\"><span class=\"loading22\"></span></div>");
};
var loading2_off = function() {
$("#blind").remove();
};
var hoge2 = function() {
loading2_on();
$.ajax( {
"url": "",
"complete": function() {
loading2_off();
}
} );
};
CSSの方は、position:fixedで画面と同一サイズのdiv#blindを設置します。
またspan(loading自身)は、画面の中心に設置するため、top:50%、left:50%としてから、widthとheightのそれぞれ半分をマイナスmarginで戻します。
尚、background-color:#fffは古いIE対策です。rgba(0, 0, 0, 0.1)をrgba(255, 255, 255, 0.5)などとするとホワイトアウトになります。代わりにopacityを使う手もあります。
div#blind {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
background-color: rgba(0, 0, 0, 0.1);
text-align: center;
}
span.loading22 {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -100px;
}
下のボタンをクリックしてお試しください(2秒後にloading_offになります)。
ここでは一例をご紹介しましたが、使い方は無限大です。商用でも完全無料でご利用いただけますので、ぜひご利用ください。SNS等で拡散して頂けますとうれしいです。