【HTML5/CSS】画像を使わないでCSS3でローディング用アニメーションをつくってみよう

HTML5のサイト作成にて、時間がかかる処理の時にLoadingアイコンを表示しているサイトがよくあります。
そこで、Loading用のアイコン表示させる方法について調べてみました。

１、ソースコード


(!) HTML5(htmlファイル)
 ローディングを表示する<div>をHTMLに用意しCSS3でアイコンをつくる

    <div  id="loader">Loading...</div>
    <div id="loader_p">
        <p> Loading...</p>
    </div>

(2) CSS(cssファイル)
#loader {
  position: absolute;
  font-size: 10px;
  text-indent: -9999em;
  border-radius: 50%; 
  border: 10px solid #00F;
  border-right-color: transparent;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
#loader,
#loader:after {
  border-radius: 50%;
    width: 60px;
    height: 60px;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#loader_p
{
   position: absolute;
   margin-top:0px;
   margin-left:0px;
   width: 60px;
   height: 60px;
}
#loader_p > p
{
   margin-top:30px;
   margin-left:12px;
   font-size:12px;
   color:#00F;
}

２、説明
(1) HTML
id="loader"がくるくる回る円のの部分です。
id="loader_p"がLoading...と表示する文字の部分です。

(2) CSS
 1.1秒回転する”load8”アニメーションを無限（infinite）に繰り返すように指定します。
easingはlinearで設定しています。
  animation: load8 1.1s infinite linear;

Safari、Opera、iOS Safari、Android Browser用にベンダープレフィックスの『-Webkit-』をつけます。


@keyframesは、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を指定します。

必ず指定しないといけないのは、最初と最後で、0% (または from) と100% (または to) で指定します。
回転させるので、rotateで回転角度を指定します。
 @keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

id="loader_p"のCSSは、表示位置と幅高さを指定しています。
特にアニメーションは指定していません。

【参考URL】
http://www.html5-memo.com/webtips/css3-loading/
http://scene-live.com/page.php?page=77
http://projects.lukehaas.me/css-loaders/

http://sterfield.co.jp/designer/css3%E3%81%AEanimation%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%82%89%E4%BA%88%E6%83%B3%E4%BB%A5%E4%B8%8A%E3%81%AB%E7%B0%A1%E5%8D%98%E3%81%A0%E3%81%A3%E3%81%9F%EF%BC%81/