FontAwesomeで作るロード表示

goto_jp 580views 更新:2014年5月21日

サンプルはこちら。

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の上と左に箱の幅と高さの半分をマイナス値で入れるのが画面中央配置の定石です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません