@ebay/skin/dist/skeleton/skeleton.css

Skin - CSS modules that represent the brand eBay

@keyframes skeleton-fade-out {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes skeleton-fade-in {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
::view-transition-new(skeleton-transition-*) {
    animation: skeleton-fade-in var(--motion-duration-medium-2)
        var(--motion-easing-continuous);
}
::view-transition-old(skeleton-transition-*) {
    animation: skeleton-fade-out var(--motion-duration-short-3)
        var(--motion-easing-continuous);
}
.skeleton {
    container-name: skeleton-container;
    container-type: inline-size;
    cursor: progress;
    width: 100%;
}
.skeleton__avatar,
.skeleton__button,
.skeleton__image,
.skeleton__text,
.skeleton__textbox {
    background: var(--skeleton-background, var(--color-loading-fill));
    width: 100%;
}
.skeleton__avatar {
    border-radius: var(--avatar-border-radius, 50%);
    height: 48px;
    width: 48px;
}
.skeleton__button {
    border-radius: var(--btn-border-radius, 20px);
    height: 40px;
}
.skeleton__button--small {
    border-radius: var(--btn-border-radius, 16px);
    height: 32px;
}
.skeleton__button--large {
    border-radius: var(--btn-border-radius, 24px);
    height: 48px;
}
.skeleton__text {
    border-radius: var(--text-border-radius, 3px);
    height: 16px;
    width: calc(100% - var(--spacing-300));
}
.skeleton__text:after {
    height: 16px;
    margin-top: calc(16px + var(--spacing-100));
}
.skeleton__text--large {
    height: 24px;
}
.skeleton__text--large:after {
    height: 24px;
    margin-top: calc(24px + var(--spacing-100));
}
.skeleton__text--multiline {
    margin-bottom: var(--spacing-300);
    position: relative;
    width: calc(100% - var(--spacing-300));
}
.skeleton__text--multiline:after {
    background: inherit;
    content: "";
    position: absolute;
    width: calc(100% - var(--spacing-700));
}
.skeleton__text--large.skeleton__text--multiline {
    margin-bottom: var(--spacing-400);
}
.skeleton__textbox {
    border-radius: var(--textbox-border-radius, var(--border-radius-50));
    height: 48px;
}
.skeleton__image {
    border-radius: var(--image-border-radius, var(--border-radius-50));
    height: 100%;
    max-width: none;
}
.skeleton__image:after {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
span.skeleton__avatar,
span.skeleton__button,
span.skeleton__image,
span.skeleton__text,
span.skeleton__textbox {
    display: inline-block;
}
span.skeleton__avatar:not(:last-child),
span.skeleton__button:not(:last-child),
span.skeleton__image:not(:last-child),
span.skeleton__text:not(:last-child),
span.skeleton__textbox:not(:last-child) {
    margin-inline-end: var(--spacing-100);
}
div.skeleton__avatar:not(:last-child),
div.skeleton__button:not(:last-child),
div.skeleton__image:not(:last-child),
div.skeleton__text:not(:last-child),
div.skeleton__textbox:not(:last-child) {
    margin-block-end: var(--spacing-150);
}
.skeleton--on-secondary {
    --skeleton-background: var(--color-loading-fill-on-secondary);
}
.skeleton--purple {
    --skeleton-background: var(--color-gradient-ai-purple-subtle);
}
.skeleton--green {
    --skeleton-background: var(--color-gradient-ai-green-subtle);
}
.skeleton--blue {
    --skeleton-background: var(--color-gradient-ai-blue-subtle);
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes on-primary {
        0% {
            background-color: var(--color-loading-on-primary-state-1);
        }
        to {
            background-color: var(--color-loading-on-primary-state-2);
        }
    }
    @keyframes on-secondary {
        0% {
            background-color: var(--color-loading-on-secondary-state-1);
        }
        to {
            background-color: var(--color-loading-on-secondary-state-2);
        }
    }
    .skeleton__avatar,
    .skeleton__button,
    .skeleton__image,
    .skeleton__text,
    .skeleton__textbox {
        animation: var(--motion-duration-long-3) var(--motion-easing-continuous)
            infinite alternate on-primary;
    }
    .skeleton--on-secondary .skeleton__avatar,
    .skeleton--on-secondary .skeleton__button,
    .skeleton--on-secondary .skeleton__image,
    .skeleton--on-secondary .skeleton__text,
    .skeleton--on-secondary .skeleton__textbox {
        animation: var(--motion-duration-long-3) var(--motion-easing-continuous)
            infinite alternate on-secondary;
    }
}
@container skeleton-container (width > 79px) {
    .skeleton__image {
        border-radius: var(--image-border-radius, var(--border-radius-100));
    }
}
[dir="rtl"] .skeleton__text--multiline:after {
    left: var(--spacing-700);
}