CSS+JavaScriptでローディング時にスケルトンスクリーン

Result

ユーザーに優しいとウワサのローディング時のスケルトンスクリーンを殆どCSS、ほんの少しのJavaScriptで実装する、というもの。

JavaScriptは表示の切り替えの為にclassを削除するためだけに使っていますので表示そのものはCSSで管理されています。

css

.skeleton {
	position: relative;
	width: max-content;
	overflow: hidden;
	border-radius: 4px;
	background-color: #1e2226 !important;
	color: transparent !important;
	border-color: #1e2226 !important;
	user-select: none;
	cursor: default;
}

.skeleton::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: translateX(-100%);
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0,
		rgba(255, 255, 255, 0.2) 20%,
		rgba(255, 255, 255, 0.5) 60%,
		rgba(255, 255, 255, 0)
	);
	animation: shimmer 2s infinite;
	content: "";
}

@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}

JavaScript

const skeletons = document.querySelectorAll(".skeleton");
skeletons.forEach((skeleton) => {
	setTimeout(() => {
		skeleton.classList.remove("skeleton");
	}, 4000);
});

サンプル用に用意された便宜上のものです。実装時は適したコードに変更してください。

html

<div class="profile-container">
	<div class="profile-images">
		<div class="cover-img skeleton">
			<img src="https://picsum.photos/800/400">
		</div>
		<div class="profile-img skeleton">
			<img src="https://picsum.photos/100/100" alt="Photo by Ian Dooley on Unsplash">
		</div>
	</div>
	<div class="profile-text">
		<h1 class="skeleton">hogehoge</h1>
		<p class="skeleton">hugahuga foo bar piyopiyo</p>
		<h5 class="skeleton">Tokyo, Osaka, Fukuoka<a class="skeleton" href="#">お問い合わせ</a></h5>
		<p class="skeleton"><a class="skeleton" href="#">534 コメント</a></p>
	</div>
	<div class="profile-cta">
		<a class="message-btn skeleton" href="#">DMを送る</a>
		<a class="more-btn skeleton" href="#">プロフィール</a>
	</div>
</div>

スケルトンスクリーンにしたい場所にskeletonというclassを付与。

via

How to Create a Skeleton Screen Loading Effect in HTML, CSS, and JavaScript