CSSだけで作るloadingシリーズをまとめて「loadingアイコンメーカー」として提供を開始しました

これまで紹介した矢印ボールが回転するloadingloadingバーその他の回転系その他のバータイプテキストタイプをまとめて、色やサイズを設定し、HTML・CSSコードをダウンロードして利用できるloadingメーカーを作成し公開しました。

Loadingメーカーの使い方と注意点

今回公開したLoadingメーカーはとてもシンプルで、直感的に操作できますので、上のリンクからまずは利用をしてみてください。
Loadingメーカーページの中ほどにある、薄緑の背景の部分がメーカー本体です。

左側でLoadingのタイプ、右側でサイズ・色・アニメーションのスピード・テキスト(テキストをアニメーションするタイプのみ)を設定できます。
これらをクリックで設定すると、左下にあるプレビューが随時変更されます。気に入ったデザインが見つかったら、プレビューの下にあるCSS・HTML・IE9のコードをコピーしてください。
コード内のクラス名は、右側の「クラス名」欄で変更できます。

Loadingを実際に使ってみる

Loadingメーカーを使って生成したコードの使い方を例示します。
まず、Loadingメーカーで以下のようにコードを生成します。

CSS

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);
  }
} 

HTML

<span class="loading03"><span></span></span> 

IE9以下用

<!--[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になります)。

読み込み中に、画面をブラックアウト(ホワイトアウト)してloadingを表示する

次の例では、画面をブラックアウトさせて、操作を受け付けないことをアピールしながら読み込み中を表示します。
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等で拡散して頂けますとうれしいです。

CSSだけでやるメリットのおさらい

  • 導入が楽
    コードを貼り付けるだけだから導入が簡単です
  • カスタマイズが楽
    ご紹介しているloadingアイコンメーカーを使えば、色・サイズ・アニメーションのスピードを簡単に設定できます。テキスト系のアニメーションの場合は、Loadingに限らず「読み込み中」や「お待ちください」など文言も変更できます。
  • 透過
    すべで透過型なのでどんな背景でも使えます
  • ベクターベースでキレイ
    ベクターベースなので、高精細ブラウザでもギザギザせずにきれいに見れます
2015/9/3