【CSS】ローディングアニメーションを擬似要素で実装する

疑似要素を使ってローディングアニメーションを実装する方法をご紹介します。Twitterでもご紹介していた内容ですが、コードをコピペして利用してもらえるようにnoteでもご紹介しておきます。

CSSでのローディングアニメーションは擬似要素で実装できる。

デモ：https://t.co/scbGcFc4Cj

①コンテンツを隠す背景
②画面上部で動く線
③一番上の階層へ
④アニメーション後の非表示処理

ラインで進捗状況を表現できます。他のアニメーションに変更してもいいですね。

※画像をタップ↓ pic.twitter.com/YmWqr3g3el

— 小林 | Webクリエイター (@pulpxstyle) April 20, 2020

まずは、デモをご覧ください。

・デモ：https://pulp.style/demo/opening/

HTML

<div class="opening">
	…コンテンツ
</div>

CSS

.opening::before {
	content: '';
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: #111;
	animation: opening 2.1s forwards;
	z-index: 9998;
}

@keyframes opening {
	97% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		z-index: -1;
	}
}

.opening::after {
	content: '';
	position: fixed;
	top: 0;
	width: 0;
	height: 10px;
	background-color: #d3ac07;
	animation: openline 2s forwards;
	z-index: 9999;
}

@keyframes openline {
	95% {
		opacity: 1;
		z-index: 9999;
	}
	100% {
		width: 100%;
		opacity: 0;
		z-index: -1;
	}
}

::before
画面を覆う背景を作ります（黒背景部分）。『animation』と『keyframes』で読み込み後の処理をおこないます。2.1秒間のうちの97%は『opacity: 1』で、それ以降は100%『opacity: 0』と『z-index: -1』の状態へアニメーションをしながら実行させます。

::after
ローディングアニメーション（黄色のライン）を表現します。『height: 10px』でラインの高さを調整できます。『width: 0』でアニメーション前の状態を指定、『animation』と『keyframes』で動きを指定します。2秒間のうちの95%まではラインが表示されているようにし、100%で非表示となるように設定しております。
『width: 100%』でアニメーション後の状態を指定。『animation』と『keyframes』、『width: 0』との組み合わせにより、ラインが画面横いっぱいまで引かれるようにアニメーションさせております。

アニメーション後の処理は、どちらも画面上から見えないように『opacity: 0』『z-index: -1;』で非表示にしております。

-------

今回ご紹介したコードよりももっとシンプルに実装できるものがあるかもしれませんので、今後良いコードが見つかりましたらまたご紹介します。