.studiare-skeleton {
position: relative;
} .studiare-skeleton > * {
visibility: hidden;
opacity: 0;
} .studiare-skeleton::before {
content: "";
display: block;
width: 100%;
height: var(--skeleton-height, 80px);
border-radius: 6px;
background: linear-gradient(
90deg,
#eeeeee 25%,
#f5f5f5 37%,
#eeeeee 63%
);
background-size: 400% 100%;
animation: studiare-skeleton-shimmer 2s ease-in-out infinite;
} .studiare-skeleton.is-loaded::before {
display: none;
}
.studiare-skeleton.is-loaded > * {
visibility: visible;
opacity: 1;
} .studiare-skeleton[data-skeleton-animation="fade"].is-loaded > * {
animation: studiare-fade-in .9s ease-out forwards;
}
.studiare-skeleton[data-skeleton-animation="slide"].is-loaded > * {
animation: studiare-slide-up .9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.studiare-skeleton[data-skeleton-animation="zoom"].is-loaded > * {
animation: studiare-zoom-in .85s ease-out forwards;
} @keyframes studiare-skeleton-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@keyframes studiare-fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes studiare-slide-up {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes studiare-zoom-in {
from { opacity: 0; transform: scale(.94); }
to   { opacity: 1; transform: scale(1); }
} @media (prefers-reduced-motion: reduce) {
.studiare-skeleton::before,
.studiare-skeleton > * {
animation: none !important;
}
}