<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);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.