スポンサード

CSS でローディングアニメーションを作るには、過去にも紹介させていただいたCSS Load.net などを使う方法もありますが、

今回は 画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう の記事で紹介されていた方法をもとに、keyframes を使ったシンプルなCSS のローディングアニメーションの作成方法とカスタマイズ例をまとめてみました。

CSS3 でローディングアニメーションを作成

まずはローディングアニメーションのCSS の記述例です。

#loader {
pointer-events:none;
text-align:center;
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: 8px solid #dd0000;
border-right-color: transparent; 
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-ms-animation: spin 1s infinite linear;
}

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

ローディングを表示した場所に、以下の記述を行います。

<span id="loader"></span>

※当方での確認ブラウザは、Google Chrome、Safari、Firefox、Windows のIE 11です。

ローディングサンプル

上記コードを書いてみると、このようにローディングします。

ローダーの大きさ変更

width height border の値を調整することで、ローダーの大きさを変更することができます。

width: 60px;
height: 60px;
border: 16px solid #dd0000;

ローダーの色変更

border の色を変更すれば、ローダーの色が変わります。

border:16px solid #006699

ローダーの回転速度の変更

animation プロパティを調整して、回転速度を変更することも可能です。

-webkit-animation: spin 3s infinite linear;
-moz-animation: spin 3s infinite linear;
-ms-animation: spin 3s infinite linear;

スポンサード