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

スマートフォンのように読み込みに時間がかかるデバイスの場合や、ギャラリーサイトのように複数の画像を読み込む場合、大掛かりなギミックのJSを読み込む場合など、最近はFLASHでなくてもローディングを使用しているサイトをよく見かけます。

今回はそんなローディング用アニメーションをCSS3のグラデーションやアニメーションを使って、画像を使わずに制作する方法を、様々なローディング用アニメーションの種類とともに紹介します。

CSS3のアニメーションに対応しているブラウザが対象なので、テストサンプル的なものもありますが、gifアニメで制作するよりも手軽に汎用的で軽量なローディング用アニメーションができるので、ちょっとしたローディングが必要な際に便利かもしれません。

CSS3でローディング用アニメーションを作ってみる

CSS3のアニメーションを使えば、かえってgifアニメより滑らかで凝った演出のローディング用アニメーションが作れる場合もあります。

画像を使わずにどうやってCSS3でローディング用アニメーションのアイコンやアニメーションをつくるのか、その手順を説明します。

CSS3でつくるローディングアニメーションの手順

1. ローディングを表示する<div>をHTMLに用意しCSS3でアイコンをつくる

例として<div id=”loader”>の中にC状の丸いアイコンをつくる例を紹介します。

デモ：サンプルを見る

デモ：サンプルを見る

HTML

<div id="loader"></div>

CSS

#loader
{
	position: absolute;
	width: 30px; /*ローディングアイコンの横サイズ*/
	height: 30px; /*ローディングアイコンの縦サイズ*/
	border-radius: 50%;  /*CSS3で円を書く*/
	border: 8px solid #fff;  /*円に○の白枠をつける*/
	border-right-color: transparent; /*円の右にC状の空きをつける*/
}

2. CSS3でアニメーションをつける

1秒1回転する”spin”アニメーションを無限（infinite）に繰り返すように指定します。
easingはlinearで設定しています。

CSS

#loader
{
	animation: spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/
}

3. CSS3のキーフレームアニメーションをつける

CSS3のキーフレームアニメーションは、アニメーションのトータルの中にタイムラインの様にパーセンテージで変化をつけることができます。

ここでは1回転する”spin”アニメーションの中にアルファで濃くなったり薄くなったりする変化をつけました。

CSS

@keyframes spin
{
	0% { transform: rotate(0deg);   opacity: 0.2; } /*0%の時は20％の透明度*/
	50%  { transform: rotate(180deg); opacity: 1.0; } /*50%の時は透明度なし*/
	100%   { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20％の透明度に戻る*/

}

4. JSで実際にローディングさせる際に作ったローディング用アニメーションを表示する設定をする

1～3までの手順でCSS3でつくるローディング用アニメーション自体は完成ですが、実際にローディングさせる際には、読み込みの際にjQueryなどのJSを使って<div id=”loader”>のローディングを表示する設定をします。

※ローディング用アニメーションを作るのにはCSS3のみでできますが、実際のローディングの表示の際にはJSが必要になります。

CSS3で色々な種類のローディング用アニメーションを作ってみる

以上の手順を元に、実際にCSS3のローディング用アニメーションの様々なサンプルを用意しました。

CSS3アニメーションに対応しているSafari、Chrome、FireFoxのモダンブラウザからしか見れませんが、デモページのソース内にもコメントアウトで細かい説明を入れておりますので、よろしければカスタマイズしてみてください。

ドット状のローディング用アニメーション

デモ：サンプルを見る

三点リーダーのようなドット状のボールに色がついていくローディングアニメーションです。

リストの中にCSS3でボール状の円を描き、そこにアニメーションで１つ１つ色がついていく指定をしています。

デモ：ドット状のローディング用アニメーションのサンプルを見る/

HTML
リストの中にそれぞれドットの内側の●となる<div class=”ball”>と、外側の○となる<div class=”pulse”>を設定して、それぞれにidを付けます。

<ul id="dot">
<li><div id="layer1" class="ball"></div><div id="layer1" class="pulse"></div></li>
<li><div id="layer2" class="ball"></div><div id="layer2" class="pulse"></div></li>
<li><div id="layer3" class="ball"></div><div id="layer3" class="pulse"></div></li>
<li><div id="layer4" class="ball"></div><div id="layer4" class="pulse"></div></li>
<li><div id="layer5" class="ball"></div><div id="layer5" class="pulse"></div></li>
</ul>

CSS
CSSのborder-radiusで丸いドットをつくり、1つ1つのドットにアニメーションをずらしながら付けて行く指定をします。

/* ドットの位置と最初の色のスタイル */
ul#dot {
	list-style:none;
	width:125px;
	margin:0 auto;
	padding-top:40px;
	padding-bottom:40px;
}
ul#dot li {
	float:left;
	position:relative;
	width:15px;
	height:15px;
	border:1px solid #fff;
	border-radius:50px;
	margin-left:10px;
	border:1px solid #bbb; 
	background:#ddd;
}
ul#dot li:first-child { margin-left:0; }

/* ドットの内側の●のアニメーション時の色と動き */
.running .ball {
	background-color:#17cddd; 
	background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
	background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 

	width:15px;
	height:15px;
	border-radius:50px;
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	
	-moz-animation:loading 0.5s linear forwards;
	-webkit-animation:loading 0.5s linear forwards;
}

/* ドットの外側の○のアニメーション時の色と動きと消える指定 */
.running .pulse {
	width:15px;
	height:15px;
	border-radius:30px;
	border: 1px solid #24b9c6;
	box-shadow: 0 0 5px #24b9c6;
	position:absolute;
	top:-1px;
	left:-1px;
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	
	-webkit-animation:pulse 1s ease-out;
	-moz-animation:pulse 1s ease-out;
}

/* ドットの１つ１つのアニメーションをずらす */
#layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
#layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }

/* キーフレームを使ったローディングのボール状のかたちの中の始まりと終わりの指定 */
@-moz-keyframes loading {
	0%{-moz-transform:scale(0,0);}
	100%{-moz-transform:scale(1,1);}	
}

@-webkit-keyframes loading {
	0%{-webkit-transform:scale(0,0);}
	100%{-webkit-transform:scale(1,1);}	
}

/* キーフレームを使ったローディングのボールの外枠の変化の様子 */
@-moz-keyframes pulse {
	0%   {-moz-transform: scale(0);opacity: 0;}
	10%  {-moz-transform: scale(1);opacity: 0.5;}
	50%  {-moz-transform: scale(1.75);opacity: 0;}
	100% {-moz-transform: scale(0);opacity: 0;}  
}

@-webkit-keyframes pulse {
	0%   {-webkit-transform: scale(0);opacity: 0;}
	10%  {-webkit-transform: scale(1);opacity: 0.5;}
	50%  {-webkit-transform: scale(1.75);opacity: 0;}
	100% {-webkit-transform: scale(0);opacity: 0;}    
}

ライン状のローディング用アニメーション

デモ：サンプルを見る

一直線のラインに色がついていくローディングアニメーションです。

横幅100%のdivの中にCSS3のアニメーションで色が0%から100%へと色がついていく指定をしています。

デモ：ライン状のローディング用アニメーションのサンプルを見る/

HTML
横幅100%のラインの<div id=”line”>の中に色が付いて行く<span class=”expand”>を設定します。

<div id="line">
<span class="expand"></span>
</div>

CSS
CSSでラインの色とアニメーションの指定をします。

/* ラインの最初の色のスタイル */
#line { 
	width:100%; /* 横幅100% */
	height:5px; 
	margin:40px auto; 
	background:#ddd;
}

/* ラインのアニメーション時の色と動き */
.fullwidth .expand { 
	width:100%; 
	height:5px; 
	margin:0; 
	background:#17cddd; 
	position:absolute;
    -moz-animation:fullexpand 5s ease-out;
	-webkit-animation:fullexpand 5s ease-out;
}

 /* キーフレームを使った横幅100%のローディングの始まりと終わりの変化 */
@-moz-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:100%;}	
}
@-webkit-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:100%;}	
}

※このローディング用アニメーションはループなしのローディング用アニメーションのため、サンプルではアニメーションをスタートさせるJSのみが入っています。

サークル状のローディング

デモ：サンプルを見る
サークルがくるくる回転するローディングアニメーションです。

上の2つの様に読み込みのパーセントを示すようなローディングではなく、表示までの待ち時間にループで使うローディングに最適です。

デモ：サークル状のローディング用アニメーションのサンプルを見る/

HTML
外側と内側の2つの円を作るための<div>を用意します。

<div class="circle"></div>
<div class="circle1"></div>

CSS
CSSのborder-radiusをつかって2つの円をつくり、それぞれアニメーションさせます。

/* 外側の大きなサークルのラインの色とスタイルとアルファで表示＆消えるアニメーション */
.circle {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-right:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 35px #2187e7;
	width:50px;
	height:50px;
	margin:0 auto;
	-moz-animation:spinPulse 1s infinite ease-in-out;
	-webkit-animation:spinPulse 1s infinite linear;
}
/* 内側の小さなサークルのラインの色とスタイルとアルファで表示＆消えるアニメーション */
.circle1 {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-left:5px solid rgba(0,0,0,0);
	border-right:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 15px #2187e7; 
	width:30px;
	height:30px;
	margin:0 auto;
	position:relative;
	top:-50px;
	-moz-animation:spinoffPulse 1s infinite linear;
	-webkit-animation:spinoffPulse 1s infinite linear;
}

/* キーフレームを使ったローディングのくるくる回るアニメーション */
@-moz-keyframes spinPulse {
	0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
	50% { -moz-transform:rotate(145deg); opacity:1; }
	100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
	0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
	50% { -webkit-transform:rotate(145deg); opacity:1;}
	100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}

バー状のローディング

デモ：サンプルを見る

バー状の中に並んだ四角が内側から外側へと色がついていくローディングアニメーションです。

<div>の中にCSSで四角いブロックを描き、そこにアニメーションで１つ１つ色がついていく指定をしています。

こちらも表示までの待ち時間にループで使うローディングに最適です。

デモ：バー状のローディング用アニメーションのサンプルを見る/

HTML
<div class=”contentBar”>で囲まれた<div>の中にそれぞれ<div class=”barlittle”>というブロック状の四角を表示する<div>を用意してそれぞれにidをつけます。

<div class="contentBar">
<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>
</div>

CSS
CSSで四角いブロックをつくり、1つ1つの四角にアニメーションをずらしながら付けて行く指定をします。

.contentBar {
	width:90px;
	margin:0 auto;
	padding-top:40px;
	padding-bottom:40px;
}
/* 四角いブロックの中のアニメーション時の色と動き */
.barlittle {
	background-color:#17cddd;  
	background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
	background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
	border:1px solid #bbbbb; 
	width:10px;
	height:10px;
	float:left;
	margin-left:5px;
    opacity:0.1;
	-moz-transform:scale(0.7);
	-webkit-transform:scale(0.7);
	-moz-animation:move 1s infinite linear;
	-webkit-animation:move 1s infinite linear;
}
/* ブロックの１つ１つのアニメーションをずらす */
#block_1{
 	-moz-animation-delay: .4s;
	-webkit-animation-delay: .4s;
 }
#block_2{
 	-moz-animation-delay: .3s;
	-webkit-animation-delay: .3s;
}
#block_3{
 	-moz-animation-delay: .2s;
	-webkit-animation-delay: .2s;
}
#block_4{
 	-moz-animation-delay: .3s;
	-webkit-animation-delay: .3s;
}
#block_5{
 	-moz-animation-delay: .4s;
	-webkit-animation-delay: .4s;
}
/* キーフレームを使ったローディングの始まりと終わりの指定 */
@-moz-keyframes move{
	0%{-moz-transform: scale(1.2);opacity:1;}
	100%{-moz-transform: scale(0.7);opacity:0.1;}
}
@-webkit-keyframes move{
	0%{-webkit-transform: scale(1.2);opacity:1;}
	100%{-webkit-transform: scale(0.7);opacity:0.1;}
}

CSS3を使用したローディング用アニメーションのジェネレーター

CSS load.net

CSS load.net

http://cssload.net/

これまで紹介した方法で作るローディング用アニメーションを簡単にカスタマイズしてコードを入手できるジェネレーターです。

こちらもCSS3アニメーションに対応したモダンブラウザのみで使えるものですが、手軽にCSS3のローディング用アニメーションを試してみたい際やコードを見たい際に、種類も豊富で便利です。

IE6でも使えるカスタマイズ可能なローディング用アニメーションJS

今回はCSS3のアニメーションに対応しているブラウザのみで使えるローディング用アニメーションの作り方を紹介しましたが、IE6を含むクロスブラウザで使用可能な画像を使わずにローディング用アニメーションを作成できるプラグインJSをひとつ紹介します、

spin.js

spin.js

http://fgnass.github.com/spin.js/

回転するローディング用アニメーションを画像を使わずにCSSとjQueryのみで実現しているJSのプラグインです。

色や大きさ、シャドウ、回転の早さなどを設定で自由にカスタマイズでき、IE6を含めたクロスブラウザでの使用が可能です。

オーソドックスなローディング用アニメーションが必要な際に非常に便利です。

まとめと参考サイト

CSS3のみで図形をつくり、画像を使用しないローディング用アニメーションの作成方法を紹介しましたが、背景画像に変更すればオリジナルのロゴやアイコンをCSS3のアニメーションで回転させたりすることもできます。

また、今回はCSS3でつくるローディング用アニメーションを様々なサンプルを例に紹介しましたが、今度はローディング用アニメーションを使用して実際にサイトでローディングを行う際の実践編をご紹介できればと思います。

参考サイト

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

まずはここから始めよう！作業効率を早めるPhotoshopとIllustratorのショートカットまとめ（ファイル操作・コピペ・ズーム関連）

Instagram（インスタグラム）の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。

アプリ風インターフェイスのフォトギャラリーをCSS3で作成する【jQuery連載17】

マウスホイールに動きで横にスクロールの横長ページを作成する【jQuery連載16】

この記事に関連する記事