Freeway ローディングマークを挿入

久しぶりに、Freewayというか、htmlに関する投稿です。
本日はローディングマークの挿入です。ところでローディングマークとは何なのか？
サイトを閲覧している際に、大きな画像を読み込んでいるときに表れる、くるくると回っている風車の事ですね。
↓コレ

ネット回線が細くて、画像の読み込みに時間がかかるとフリーズしてるのか？？と不安になりますよね。そんな時は、「読み込んでるよー！」と教えてあげた方がいいですよね。

導入の方法は、挿入したいブロック要素のクラスを class="Reading"と指定します。

続いて、CSSには

.Reading {

  width:100%;

  background-image:url("../Resources/ajax-loader.gif");

  background-repeat:no-repeat;

  background-position: center center;

}

と記述します。

最後に、ローディングマークの画像を、サーバー内のResourcesに収納します。

色々なローディングマークがネット上に配布されているので、お好みのモノを使ってみて下さい。