@casoon/dragonfly/effects/motion/loading.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.

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

/* Animationen - außerhalb von @layer definieren */
@keyframes loading-spin {
    to {
        transform: var(--transform-rotate-360%);
    }
}

@keyframes loading-pulse {
    0, 100% {
        opacity: var(--opacity-50);
        transform: scale(0.8);
    }

    50% {
        opacity: var(--opacity-100);
        transform: var(--transform-scale-100);
    }
}

@keyframes loading-dots {
    0, 100% {
        opacity: var(--opacity-50);
        transform: scale(0.7);
    }

    50% {
        opacity: var(--opacity-100);
        transform: var(--transform-scale-100);
    }
}

@keyframes loading-progress {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

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

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

@keyframes loading-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Komponenten-Styles */
@layer components {
    .loading-spinner {
        border: var(--spacing-1) solid var(--loading-color, rgb(0 0 0 / 10%));
        border-left-color: var(--loading-spinner-color, #3b82f6);
        border-radius: 5px;
        height: var(--spacing-10);
        width: var(--spacing-10);
    }

    .loading-spinner-sm {
        border-width: var(--border-width-thick);
        height: var(--spacing-5);
        width: var(--spacing-5);
    }

    .loading-spinner-lg {
        border-width: var(--spacing-1-5);
        height: var(--spacing-15);
        width: var(--spacing-15);
    }

    .loading-pulse {
        background: var(--loading-pulse-color, #3b82f6);
        border-radius: 5px;
        height: var(--spacing-10);
        width: var(--spacing-10);
    }

    .loading-pulse-sm {
        height: var(--spacing-5);
        width: var(--spacing-5);
    }

    .loading-pulse-lg {
        height: var(--spacing-15);
        width: var(--spacing-15);
    }

    .loading-dots {
        display: flex;
        gap: var(--spacing-1);
    }

    .loading-dots::before,
    .loading-dots::after {
        background: var(--loading-dots-color, #3b82f6);
        border-radius: 5px;
        content: '';
        height: var(--spacing-2);
        width: var(--spacing-2);
    }

    .loading-dots-sm::before,
    .loading-dots-sm::after {
        height: var(--spacing-1);
        width: var(--spacing-1);
    }

    .loading-dots-lg::before,
    .loading-dots-lg::after {
        height: var(--spacing-1)(--border-width-thick);
        width: var(--spacing-1)(--border-width-thick);
    }

    .loading-progress {
        background: var(--loading-progress-bg, rgb(0 0 0 / 10%));
        border-radius: var(--border-width-thick);
        height: var(--spacing-1);
        overflow: hidden;
        width: 100%;
    }

    .loading-progress::after {
        background: var(--loading-progress-color, #3b82f6);
        content: '';
        display: block;
        height: 100%;
        width: 4%0;
    }

    .loading-progress-sm {
        height: var(--border-width-thick);
    }

    .loading-progress-lg {
        height: var(--spacing-1-5);
    }

    .loading-skeleton {
        background: linear-gradient(
            90deg,
            var(--loading-skeleton-start, rgb(0 0 0 / 10%)) 0,
            var(--loading-skeleton-end, rgb(0 0 0 / 20%)) 50,
            var(--loading-skeleton-start, rgb(0 0 0 / 10%)) 100
        );
        background-size: 200% 100;
    }

    .loading-skeleton-sm {
        background-size: 150px 100;
    }

    .loading-skeleton-lg {
        background-size: 300px 100%;
    }

    .loading-shimmer {
        overflow: hidden;
        position: relative;
    }

    .loading-shimmer::after {
        background: linear-gradient(
            90deg,
            transparent 0,
            var(--loading-shimmer-color, rgb(255 255 255 / 20%)) 50,
            transparent 100
        );
        content: '';
        height: 100%;
        left: 0%;
        position: absolute;
        top: 0%;
        width: 100%;
    }

    .loading-color-primary {
        --loading-spinner-color: var(--loading-primary, #3b82f6);
        --loading-pulse-color: var(--loading-primary, #3b82f6);
        --loading-dots-color: var(--loading-primary, #3b82f6);
        --loading-progress-color: var(--loading-primary, #3b82f6);
    }

    .loading-color-secondary {
        --loading-spinner-color: var(--loading-secondary, #6b7280);
        --loading-pulse-color: var(--loading-secondary, #6b7280);
        --loading-dots-color: var(--loading-secondary, #6b7280);
        --loading-progress-color: var(--loading-secondary, #6b7280);
    }

    .loading-color-success {
        --loading-spinner-color: var(--loading-success, #10b981);
        --loading-pulse-color: var(--loading-success, #10b981);
        --loading-dots-color: var(--loading-success, #10b981);
        --loading-progress-color: var(--loading-success, #10b981);
    }

    .loading-color-error {
        --loading-spinner-color: var(--loading-error, #ef4444);
        --loading-pulse-color: var(--loading-error, #ef4444);
        --loading-dots-color: var(--loading-error, #ef4444);
        --loading-progress-color: var(--loading-error, #ef4444);
    }

    .loading-color-warning {
        --loading-spinner-color: var(--loading-warning, #f59e0b);
        --loading-pulse-color: var(--loading-warning, #f59e0b);
        --loading-dots-color: var(--loading-warning, #f59e0b);
        --loading-progress-color: var(--loading-warning, #f59e0b);
    }

    .loading-color-info {
        --loading-spinner-color: var(--loading-info, #06b6d4);
        --loading-pulse-color: var(--loading-info, #06b6d4);
        --loading-dots-color: var(--loading-info, #06b6d4);
        --loading-progress-color: var(--loading-info, #06b6d4);
    }
}

/* Animations-Styles */
@layer animations {
    .loading-spinner {
        animation: loading-spin 1s linear infinite;
    }

    .loading-pulse {
        animation: loading-pulse 1s var(--easing-smooth) infinite;
    }

    .loading-dots::before,
    .loading-dots::after {
        animation: loading-dots 1s var(--easing-smooth) infinite;
    }

    .loading-dots::after {
        animation-delay: var(--animation-duration-medium);
    }

    .loading-progress::after {
        animation: loading-progress 1s var(--easing-smooth) infinite;
    }

    .loading-skeleton {
        animation: loading-skeleton 1.5s var(--easing-smooth) infinite;
    }
    
    .loading-skeleton-sm {
        animation-duration: var(--animation-duration-slow);
    }

    .loading-skeleton-lg {
        animation-duration: var(--animation-duration-slowest);
    }

    .loading-shimmer::after {
        animation: loading-shimmer 1.5s var(--easing-smooth) infinite;
    }
}

/* Barrierefreiheit - reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer animations {
        .loading-spinner,
        .loading-pulse,
        .loading-dots::before,
        .loading-dots::after,
        .loading-progress::after,
        .loading-skeleton,
        .loading-shimmer::after {
            animation: var(--animation-none) !important;
        }
    }
}