skeleton.pcss

@define-mixin skeleton $width, $color, $height:100% {
    --monster-skeleton-color: $color;
    --monster-skeleton-color-50: rgba(from $color 255 255 255 / 0.5);
    --monster-skeleton-height: $height;
    --monster-skeleton-width: $width;
    --monster-skeleton: linear-gradient(
            99deg,
            var(--monster-skeleton-color) 0%,
            var(--monster-skeleton-color-50) 40%,
            transparent 70%
    );

    background-image: var(--monster-skeleton);

    background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);

    background-repeat: no-repeat;

    background-position: 0 0;

    color: var(--monster-skeleton-color);

    min-height: 1px;
}