CSSとテキストで実装するローディングアニメーションのサンプルコード

Posted on April 17th, 2017
Category : Tips

CSSとテキストで実装したローディングアニメーションのサンプルです。サイズ・カラー・フォントといった見栄えについてはもちろん、アニメーションタイプやスピードを調整したい場合もすべてCSSで変更できるようになっていますし、表示させるテキストもHTMLを書き換えるだけで変更可能なので、手っ取り早くローディングを用意したいときなどに便利です。

※プレフィックスは必要に応じて追記してください。

ここではアニメーションGIFでの見栄えと実装コードを紹介しているので、実際の表示は以下デモで確認してください。
また、デモ（CodePen）ではSCSSを利用したコードで実装しているので、普段からSCSSで用いてる人はこちらでコードを確認してください。

DEMO

CODE #1

先頭の「L」からひと文字ずつフェードアウトしていき、末尾の「G」までいったら次は先頭からひと文字ずつフェードインしてくるタイプのもので、フェードイン・アウトの見栄えはopacityを利用しています。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

HTML

<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

.loading span {
	display: inline-block;
	margin: 0 -.05em;
	animation: loading 1.4s infinite alternate;
}
loading span:nth-child(2) {
	animation-delay: .1s;
}
loading span:nth-child(3) {
	animation-delay: .2s;
}
loading span:nth-child(4) {
	animation-delay: .3s;
}
loading span:nth-child(5) {
	animation-delay: .4s;
}
loading span:nth-child(6) {
	animation-delay: .5s;
}
loading span:nth-child(7) {
	animation-delay: .6s;
}
@keyframes loading {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

CODE #2

先ほどと同様にopacityでひと文字ずつ透過率を下げているのですが、こちらの場合は完全に見えなくなるまでは透過させず、さらにそこへfilter: blur();を組み合わせてみたものになります。
HTMLはCODE #1と同じものを使用し、CSSは下記のように記述します。

CSS

.loading span {
	display: inline-block;
	margin: 0 -.05em;
	animation: loading 1.2s infinite alternate;
}
.loading span:nth-child(2) {
	animation-delay: .2s;
}
.loading span:nth-child(3) {
	animation-delay: .4s;
}
.loading span:nth-child(4) {
	animation-delay: .6s;
}
.loading span:nth-child(5) {
	animation-delay: .8s;
}
.loading span:nth-child(6) {
	animation-delay: 1s;
}
.loading span:nth-child(7) {
	animation-delay: 1.2s;
}
@keyframes loading {
	0% {
		filter: blur(0);
		opacity: 1;
	}
	100% {
		filter: blur(5px);
		opacity: .2;
	}
}

CODE #3

ひと文字ずつ拡大・縮小を繰り返すようなアニメーションで、transform: scale();を用いて実装します。
HTMLはCODE #1と同じものを使用し、CSSは下記のように記述します。

CSS

.loading span {
	display: inline-block;
	margin: 0 -.075em;
	animation: loading .7s infinite alternate;
}
.loading span:nth-child(2) {
	animation-delay: .1s;
}
.loading span:nth-child(3) {
	animation-delay: .2s;
}
.loading span:nth-child(4) {
	animation-delay: .3s;
}
.loading span:nth-child(5) {
	animation-delay: .4s;
}
.loading span:nth-child(6) {
	animation-delay: .5s;
}
.loading span:nth-child(7) {
	animation-delay: .6s;
}
@keyframes loading {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.8);
	}
}

CODE #4

こちらはひと文字ずつ波打つようなアニメーションで、transform: translateY();を用いて実装します。
HTMLはCODE #1と同じものを使用し、CSSは下記のように記述します。

CSS

.loading span {
	display: inline-block;
	margin: 0 -.05em;
	animation: loading .7s infinite;
}
.loading span:nth-child(2) {
	animation-delay: .1s;
}
.loading span:nth-child(3) {
	animation-delay: .2s;
}
.loading span:nth-child(4) {
	animation-delay: .3s;
}
.loading span:nth-child(5) {
	animation-delay: .4s;
}
.loading span:nth-child(6) {
	animation-delay: .5s;
}
.loading span:nth-child(7) {
	animation-delay: .6s;
}
@keyframes loading {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(15px);
	}
}

CODE #5

こちらはひと文字ずつくるっと1回転していくアニメーションで、同じくHTMLはCODE #1と同じものを使用し、CSSは下記のように記述します。

CSS

.loading {
	perspective: 1000px;
}
.loading span {
	display: inline-block;
	margin: 0 -.05em;
	transform-origin: 50% 50% -25px;
	transform-style: preserve-3d;
	animation: loading 1.6s infinite;
}
.loading span:nth-child(2) {
	animation-delay: .1s;
}
.loading span:nth-child(3) {
	animation-delay: .2s;
}
.loading span:nth-child(4) {
	animation-delay: .3s;
}
.loading span:nth-child(5) {
	animation-delay: .4s;
}
.loading span:nth-child(6) {
	animation-delay: .5s;
}
.loading span:nth-child(7) {
	animation-delay: .6s;
}
@keyframes loading {
	0% {
		transform: rotateX(-360deg);
	}
	70% {
		transform: rotateX(0);
	}
}

擬似要素とdata属性を用いて、より複雑なアニメーションに

以下で紹介するサンプルは、すべて擬似要素とdata属性を用いたタイプになっており、各span要素で括っている文字をdata-textというデータ属性にも指定し、それぞれデータ属性に指定した文字を擬似要素として表示・アニメーションさせています。
この方法を用いることで、これまで紹介してきたようなspan要素内のひと文字のみにスタイルやアニメーションを適用するのではなく、擬似要素として表示したテキストを含めて複数のテキストに適用することが可能になるので、より複雑な見せ方やアニメーションの実装が可能になります。

※ここでは個人的にテキストを変更したくなった場合にこちらの方が楽なのでdata属性を用いた形で紹介していますが、data属性を使わずに直接CSSのcontentで指定する形でも実装できるので、自分の好みに合わせて変更してください。

CODE #6

少し透過させた黒文字がspanで括られている文字、上でアニメーションしている白文字が擬似要素とdata属性を使って表示させた文字になり、白文字の方にのみ回転するアニメーションを指定することでこのような見栄えにすることができます。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

HTML

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

CSS

.loading span {
	position: relative;
	display: inline-block;
	margin: 0 -.05em;
	color: rgba(0, 0, 0, .2);
}
.loading span::after {
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-text);
	color: #fff;
	opacity: 0;
	transform: rotateY(-90deg);
	animation: loading 4s infinite;
}
.loading span:nth-child(2)::after {
	animation-delay: .2s;
}
.loading span:nth-child(3)::after {
	animation-delay: .4s;
}
.loading span:nth-child(4)::after {
	animation-delay: .6s;
}
.loading span:nth-child(5)::after {
	animation-delay: .8s;
}
.loading span:nth-child(6)::after {
	animation-delay: 1s;
}
.loading span:nth-child(7)::after {
	animation-delay: 1.2s;
}
@keyframes loading {
	0%, 75%, 100% {
		transform: rotateY(-90deg);
		opacity: 0;
	}
	25%, 50% {
		transform: rotateY(0);
		opacity: 1;
	}
}

CODE #7

同じく少し透過させた黒文字がspanで括られている文字、上でアニメーションしている白文字が擬似要素とdata属性を使って表示させた文字になり、こちらはtransform: scale();とopacityを組み合わせたものになります。
HTMLはCODE #6と同じものを使用し、CSSは下記のように記述します。

CSS

.loading span {
	position: relative;
	display: inline-block;
	margin: 0 -.05em;
	color: rgba(0, 0, 0, .2);
}
.loading span::after {
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-text);
	color: #fff;
	opacity: 0;
	transform: scale(1.5);
	animation: loading 3s infinite;
}
.loading span:nth-child(2)::after {
	animation-delay: .1s;
}
.loading span:nth-child(3)::after {
	animation-delay: .2s;
}
.loading span:nth-child(4)::after {
	animation-delay: .3s;
}
.loading span:nth-child(5)::after {
	animation-delay: .4s;
}
.loading span:nth-child(6)::after {
	animation-delay: .5s;
}
.loading span:nth-child(7)::after {
	animation-delay: .6s;
}
@keyframes loading {
	0%, 75%, 100% {
		transform: scale(1.5);
		opacity: 0;
	}
	25%, 50% {
		transform: scale(1);
		opacity: 1;
	}
}

CODE #8

最後はspanで括られている文字と擬似要素を使って表示させた文字とで別々のアニメーションを指定したサンプルです。
具体的には、ひと文字ずつ文字色が白に変わっていく動きと最後の方にすべての文字が白に変化する動きとでそれぞれ別のアニメーションを指定しています。
こちらも実装にはHTMLはCODE #6と同じものを使用し、CSSは下記のように記述します。

CSS

.loading span {
	position: relative;
	display: inline-block;
	margin: 0 -.05em;
	color: rgba(0, 0, 0, .2);
	animation: loading-parent 5s infinite;
}
.loading span::after {
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-text);
	color: #fff;
	opacity: 0;
	animation: loading-child 5s infinite;
}
.loading span:nth-child(2)::after {
	animation-delay: .2s;
}
.loading span:nth-child(3)::after {
	animation-delay: .4s;
}
.loading span:nth-child(4)::after {
	animation-delay: .6s;
}
.loading span:nth-child(5)::after {
	animation-delay: .8s;
}
.loading span:nth-child(6)::after {
	animation-delay: 1s;
}
.loading span:nth-child(7)::after {
	animation-delay: 1.2s;
}
@keyframes loading-parent {
	0%, 35%, 100% {
		color: rgba(0, 0, 0, .2);
	}
	60%, 80% {
		color: #fff;
	}
}
@keyframes loading-child {
	0% {
		opacity: 1;
	}
	25%, 100% {
		opacity: 0;
	}
}