【CSS3】CSSでローディングのアニメーションを作ってみた！！

かなり以前にCSS3のanimationの機能を使った記事を書きました。

で、この度久しぶりにCSS3のanimationでローディングのアニメーションをやってみたいと思ったのでメモ。

animatinの詳しい内容は上記の記事を読んでいただくとして、ポイントとなりそうな所だけ説明を付けていこうかと。

ただ、当たり前ですがCSS3はあくまでローディングのぐるぐる回るアニメーションだけなので、実際に利用するにはJavaScriptなどが必要になります。

回転するローディング

まず最初は、回転するローディングアニメーションをCSS3を使って表現してみました。

html

html要素は単純にローディングの元となる要素のみです。

	/* ローディングの元となる要素 */
	

CSS

CSSで回転するローディングを作りたいのでCSS3なども使用して「C」のように丸が欠けたような要素を作っていきます。

#loader{
    margin:auto;
    width:30px;
    height:30px;
    border-radius:30px;
    border:8px solid #17cddd;
    border-right-color:transparent;
    animation:spin 1s infinite linear;
}

CSS3を使って輪っかを作る

ポイントとしては、まず輪を作る為に、widthで設定した幅と同じ大きさをborder-radiusプロパティで設定してあげると円になります。＊特に背景色とか設定していないので実際にはこの設定だけで円に見える訳ではありません。

次に輪っかにしたいのでborderプロパティで上記のように設定してあげてから、border-right-color:transparentを設定してあげるとボーダーの右側が透明になるので「C」のような形になります。

CSS3のanimationの設定

さて、本題のCSS3のanimationの設定ですが、今回は点滅しながらグルグル回転するアニメーションにしたいと思っています。

先ほど、#laoder要素にanimationプロパティの設定をしました。

#loader{
    animation:spin 1s infinite linear;
}

上記の設定はanimationのショートコードです。詳しくは「animation－CSS3リファレンス」を参照してください。

意味としては、spinというアニメーションをlinearというイージングで1秒間、無限に再生を繰り返す。という感じですかね。で肝心のアニメーションは下記のようになります。

@keyframes spin{
    0%{transform:rotate(0deg); opacity:0.4;}
    50%{transform:rotate(180deg); opacity:1;}
    100%{transform:rotate(360deg); opacity:0.4;}
    
}

という感じで設定してあります。

実際どう使うの？

まぁ、ローディングの回転するアニメーションはCSS3のanimationで出来ましたが、実際組み込む時は、どうすんのさ！？って話なのでサンプルを作りました。

以前、複数の画像の読み込みの記事を書いた時に作ったサンプルに組み込みました。下記の画像をクリックしてください。

CSSでローディングのアニメーションを作ってみたサンプル

仕組みとしては、画像の読み込みが完了した時点で、ローディングしている要素をjQueryのfadeOutで消しているだけです。　
画像の読み込みに関して、知りたい方は以前の記事を読んでください。