FontAwesomeで作るロード表示

サンプルはこちら。

See the Pen FKlpr by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

HTML

<div class="loading"><i class="fa fa-spinner fa-spin"></i></div>

FontAwesomeにはアイコン用クラスに加えていくつか特殊効果を与えるクラスも標準で用意されており、アイコンに「fa-spin」を加えることで回転し続けます。

CSS(Sass)

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  line-height: 100px;
  font-size: 56px;
  color: #fff;
  text-align: center;
  background-color: rgba(#000,.7);
  @include border-radius(10px);
}

中央に浮かせているロード表示部分のスタイルです。
これ自体は半透明のボックスを中心に配置しているだけの普通のCSSです。

absoluteの箱にtopとleftを50%設定し、marginの上と左に箱の幅と高さの半分をマイナス値で入れるのが画面中央配置の定石です。