ページローディングのプログレスバーをCSSアニメーションで実装する

See the Pen
Opening animation by Kobayashi (@Pulp_Kobayashi)
on CodePen.

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

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

疑似要素.opening::beforeでローディング時の背景（デモの場合黒背景）を表示します。width: 100%とheight: 100vhで全画面表示、background-color: #111で背景色指定。

animation: opening 2.1s forwardsのopeningで、その下の@keyframes openingのプロパティを適用します。ローディング時間の99%まではopacity: 1; z-index: 1;、100%でopacity: 0; z-index: -1;に変化させます。

z-index: -1を指定しないと、ページ全体に透明なフィルターをかけた状態になり、リンクやボタンのクリック、テキストの選択などアクションを起こせなくなりますので、下の階層へ下げます。

また、animationのforwardsでアニメーション完了時のスタイルがアニメーション完了後にも適用されるので指定しています。

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

@keyframes openingline {
	99% {
		width: 0;
		opacity: 1;
		z-index: 1;
	}

	100% {
		width: 100%;
		opacity: 0;
		z-index: -1;
	}
}

疑似要素.opening::afterでローディング時のラインアニメーションを表現します。

top: 0で画面上部に配置、left: 0が開始位置です。99%までwidth: 0; opacity: 1; z-index: 1;、100%でwidth: 100%; opacity: 0; z-index: -1;と変化。これで画面上部の左から右へアニメーションしていき、完了後は非表示にしています。

こちらもz-index: -1とanimation: forwardsを指定し、ラインを非表示にしています。