<div class="c-skeleton">
<div class="c-skeleton__row c-skeleton__row--with-avatar">
<div class="c-skeleton__avatar"></div>
<div class="c-skeleton__paragraph">
<div class="c-skeleton__string c-skeleton__string--50"></div>
<div class="c-skeleton__string c-skeleton__string--70"></div>
</div>
</div>
<div class="c-skeleton__row">
<div class="c-skeleton__paragraph">
<div class="c-skeleton__string c-skeleton__string--100"></div>
<div class="c-skeleton__string c-skeleton__string--100"></div>
</div>
</div>
</div>
.c-skeleton {
--clr-skeleton-back: transparent;
--skeleton-border-radius: 8px;
--clr-skeleton-border: var(--clr-gray-3);
--clr-skeleton-gradient-shine: #f3f5f5;
--clr-skeleton-string: var(--clr-sym-skeleton-string);
--clr-skeleton-runner-back: var(--clr-sym-skeleton-runner-back);
background-color: var(--clr-skeleton-back);
border-radius: var(--skeleton-border-radius);
border: 1px solid var(--clr-skeleton-border);
padding: 1.5rem 2.5rem 2rem 2rem;
}
.c-skeleton__row {
display: flex;
margin-bottom: 1.5rem;
}
.c-skeleton__row--with-avatar {
gap: 1rem;
align-items: center;
}
.c-skeleton__row:last-child {
margin-bottom: 0;
}
.c-skeleton__paragraph {
flex-grow: 1;
}
.c-skeleton__avatar {
background-color: var(--clr-skeleton-string);
height: 4rem;
width: 4rem;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.c-skeleton__avatar::after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg, rgba(var(--clr-skeleton-runner-back), 0) 0, rgba(var(--clr-skeleton-runner-back), 0.2) 20%, rgba(var(--clr-skeleton-runner-back), 0.5) 60%, rgba(var(--clr-skeleton-runner-back), 0));
animation: shimmer 1.6s infinite;
content: "";
}
.c-skeleton__string {
background-color: var(--clr-skeleton-string);
height: 1.25rem;
margin-bottom: 0.5rem;
position: relative;
overflow: hidden;
border-radius: 2px;
}
.c-skeleton__string::after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg, rgba(var(--clr-skeleton-runner-back), 0) 0, rgba(var(--clr-skeleton-runner-back), 0.2) 20%, rgba(var(--clr-skeleton-runner-back), 0.5) 60%, rgba(var(--clr-skeleton-runner-back), 0));
animation: shimmer 1.6s infinite;
content: "";
}
.c-skeleton__string--10 {
width: 10%;
}
.c-skeleton__string--20 {
width: 20%;
}
.c-skeleton__string--30 {
width: 30%;
}
.c-skeleton__string--40 {
width: 40%;
}
.c-skeleton__string--50 {
width: 50%;
}
.c-skeleton__string--60 {
width: 60%;
}
.c-skeleton__string--70 {
width: 70%;
}
.c-skeleton__string--80 {
width: 80%;
}
.c-skeleton__string--90 {
width: 90%;
}
.c-skeleton__string--100 {
width: 100%;
}
.c-skeleton__string:last-child {
margin-bottom: 0;
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}