zextra/src/components/feedback/skeleton/index.css

zikojs extra components

/* --- Base Skeleton Styles --- */
.skeleton {
    display: block;
    background-color: rgba(255, 255, 255, 0.13);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* --- Variants --- */
.skeleton--text {
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    transform-origin: 0 55%;
    transform: scale(1, 0.60);
    border-radius: 4px;
}

/* Auto-inset height when empty text skeleton */
.skeleton--text:empty::before {
    content: "\00a0"; /* Non-breaking space to hold natural text line height */
}

.skeleton--circular {
    border-radius: 50%;
}

.skeleton--rectangular {
    border-radius: 0;
}

.skeleton--rounded {
    border-radius: 8px;
}

/* --- Animations --- */

/* 1. Pulse Animation */
.skeleton--pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0% {
    opacity: 1;
    }
    50% {
    opacity: 0.4;
    }
    100% {
    opacity: 1;
    }
}

/* 2. Wave Shimmer Animation */
.skeleton--wave {
    position: relative;
    overflow: hidden;
}

.skeleton--wave::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
    );
    animation: skeleton-wave 1.6s linear infinite;
}

@keyframes skeleton-wave {
    100% {
    transform: translateX(100%);
    }
}

/* Layout Container for Demo */
/* .demo-card {
    background-color: #18181b;
    border: 1px solid #27272a;
    border-radius: 12px;
    padding: 20px;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.demo-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.demo-section-title {
    color: #a1a1aa;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
} */