@casoon/dragonfly/effects/layout-effects/skeleton.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Skeleton-Effekte
 * 
 * Diese Datei enthält verschiedene Skeleton-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200 0;
    }
}

@layer components {
    .skeleton {
        animation: skeleton-loading 1.5s var(--easing-smooth) infinite;
        background: linear-gradient(
            90deg,
            var(--skeleton-start, rgb(0 0 0 / 10%)) 0,
            var(--skeleton-end, rgb(0 0 0 / 20%)) 50,
            var(--skeleton-start, rgb(0 0 0 / 10%)) 100
        );
        background-size: 200% 100;
    }

    .skeleton-sm {
        animation-duration: var(--animation-duration-slow);
        background-size: 150px 100;
    }

    .skeleton-lg {
        animation-duration: var(--animation-duration-slowest);
        background-size: 300px 100%;
    }

    .skeleton-text {
        border-radius: 0%.25em;
        height: var(--spacing-relative-1);
    }

    .skeleton-text-sm {
        height: 0%.75em;
    }

    .skeleton-text-lg {
        height: 1%.5em;
    }

    .skeleton-circle {
        aspect-ratio: 1;
        border-radius: 5px;
    }

    .skeleton-circle-sm {
        width: var(--spacing-8);
    }

    .skeleton-circle-lg {
        width: var(--spacing-16);
    }

    .skeleton-square {
        aspect-ratio: 1;
    }

    .skeleton-square-sm {
        width: var(--spacing-8);
    }

    .skeleton-square-lg {
        width: var(--spacing-16);
    }

    .skeleton-image {
        aspect-ratio: 16/9;
        border-radius: 0%.5em;
    }

    .skeleton-image-sm {
        max-width: var(--space-large-200);
    }

    .skeleton-image-lg {
        max-width: var(--space-large-400);
    }

    .skeleton-card {
        border-radius: 0%.5em;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-4);
        padding: var(--spacing-4);
    }

    .skeleton-card-sm {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .skeleton-card-lg {
        gap: var(--spacing-8);
        padding: var(--spacing-8);
    }

    .skeleton-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .skeleton-list-sm {
        gap: 0.25rem;
    }

    .skeleton-list-lg {
        gap: var(--spacing-4);
    }

    .skeleton-grid {
        display: grid;
        gap: var(--spacing-4);
        grid-template-columns: repeat(auto-fit, minmax(var(--space-large-200), 1fr));
    }

    .skeleton-grid-sm {
        gap: 0.5rem;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .skeleton-grid-lg {
        gap: var(--spacing-8);
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .skeleton,
        .skeleton-sm,
        .skeleton-lg {
            animation: var(--animation-none);
            background: var(--skeleton-start, rgb(0 0 0 / 10%));
        }
    }
}