CSS3 badge

テキストベースで、ローディング中のアニメーションを表示する［Animated Type Loader］の実装方法を紹介します。

まずはサンプルをご覧ください。

CSS3 Animated Type Loader：サンプル・デモ

JavaScript等を使わず、シンプルなHTMLとCSSのみで作られています。

HTML

HTMLの記述は以下。
class="loading" というボックスの中に span で区切った文字を記述しています。

<div class="loading">
	<span>L</span>
	<span>O</span>
	<span>A</span>
	<span>D</span>
	<span>I</span>
	<span>N</span>
	<span>G</span>
</div>

文字数は何文字になっても、以下CSSのセレクタを増やすだけで対応できます。

CSS

スタイルシートの設定は以下になります。

.loading {text-align:center;}

.loading span {
position:relative;
color:#1cc;
padding:0 0.2em;
visibility:hidden;
opacity:0;
-webkit-animation:load 3s ease-in-out;
-moz-animation:load 3s ease-in-out;
-ms-animation:load 3s ease-in-out;
-o-animation:load 3s ease-in-out;
animation:load 3s ease-in-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
.loading span:nth-of-type(1) {
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
.loading span:nth-of-type(2) {
-webkit-animation-delay:0.2s;
-moz-animation-delay:0.2s;
-ms-animation-delay:0.2s;
-o-animation-delay:0.2s;
animation-delay:0.2s;
}
.loading span:nth-of-type(3) {
-webkit-animation-delay:0.4s;
-moz-animation-delay:0.4s;
-ms-animation-delay:0.4s;
-o-animation-delay:0.4s;
animation-delay:0.4s;
}
.loading span:nth-of-type(4) {
-webkit-animation-delay:0.6s;
-moz-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
.loading span:nth-of-type(5) {
-webkit-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-ms-animation-delay:0.8s;
-o-animation-delay:0.8s;
animation-delay:0.8s;
}
.loading span:nth-of-type(6) {
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
.loading span:nth-of-type(7) {
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-o-animation-delay:1.2s;
animation-delay:1.2s;
}

@-webkit-keyframes load {
0% {visibility:hidden; opacity:0; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #1cc, 0 -1px 8px #1cc;}
100% {visibility:hidden; opacity:0; text-shadow:none;}
}
@-moz-keyframes load {
0% {visibility:hidden; opacity:0; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #1cc, 0 -1px 8px #1cc;}
100% {visibility:hidden; opacity:0; text-shadow:none;}
}
@-ms-keyframes load {
0% {visibility:hidden; opacity:0; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #1cc, 0 -1px 8px #1cc;}
100% {visibility:hidden; opacity:0; text-shadow:none;}
}
@-o-keyframes load {
0% {visibility:hidden; opacity:0; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #1cc, 0 -1px 8px #1cc;}
100% {visibility:hidden; opacity:0; text-shadow:none;}
}
@keyframes load {
0% {visibility:hidden; opacity:0; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #1cc, 0 -1px 8px #1cc;}
100% {visibility:hidden; opacity:0; text-shadow:none;}
}

各ブラウザに対応するために「-webkit-」や「-moz-」等のベンダープレフィックスを記述しているので、だいぶ冗長な記述になっていますが、基本構造は簡単です。

まずCSS3の「animation」プロパティで文字の表示・非表示のアニメーションを処理。
「nth-of-type()」プロパティで選択したspan属性を「animation-delay」でタイミングをズラして描画しています。

アニメーションの内容は「@keyframes」で指定。
こちらもベンダープレフィックス込みで記述しているので、Safari、Google Chrome、Firefox等、様々なブラウザで表示されるようになっています。

「@keyframes」を利用したCSS3のアニメーション処理は、覚えるとウェブデザインの表現の幅が一気に広がります。

この機会にぜひ挑戦してみてください。

CSS3 Animated Type Loader：サンプル・デモ