<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>
body {
	margin: 0;
	font-family: Arial;
	color: rgba(255, 255, 255, 0.9);
}
.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 img {
	opacity: 0;
}

.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%);
	}
}

img {
	width: 100%;
	vertical-align: middle;
}

.profile-container {
	width: 95%;
	max-width: 780px;
	margin: 0 auto;
	border-radius: 8px;
	margin-top: 32px;
	background-color: #1e2226;
	overflow: hidden;
	position: relative;
}

.cover-img {
	width: 100%;
	overflow: hidden;
	background-color: #1e2226;
	aspect-ratio: 4 / 1;
}

.profile-img {
	border-radius: 50%;
	width: 160px;
	height: 160px;
	border: 4px solid #000;
	background-color: #1e2226;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	bottom: 100px;
}

@media (max-width: 560px) {
	.profile-img {
		width: 100px;
		height: 100px;
		bottom: 60px;
	}
}
.profile-text {
	margin-top: -80px;
	padding: 0 16px;
}

.profile-text h1 {
	margin-bottom: 0;
	font-size: 24px;
	overflow: hidden;
}

.profile-text p {
	margin: 4px 0;
	overflow: hidden;
}
.profile-text h5 {
	margin-top: 4px;
	font-size: 14px;
	margin-bottom: 8px;
	font-weight: 400;
	color: #ffffff99;
	overflow: hidden;
}
.profile-text a {
	color: #70b5f9;
	font-size: 14px;
	text-decoration: none;
	font-weight: 600;
}

.profile-text a:hover {
	color: #70b5f9;
	text-decoration: underline;
}
.profile-cta {
	padding: 16px 16px 32px;
	display: flex;
}
.profile-cta a {
	padding: 6px 16px;
	border-radius: 24px;
	text-decoration: none;
	display: block;
}

.message-btn {
	background-color: #70b5f9;
	color: #000;
}

.more-btn {
	color: inherit;
	border: 1px solid rgba(255, 255, 255, 0.9);
	margin-left: 8px;
}
const skeletons = document.querySelectorAll(".skeleton");
skeletons.forEach((skeleton) => {
	setTimeout(() => {
		skeleton.classList.remove("skeleton");
	}, 4000);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.