# 404-solution/4.1.19/includes/css/suggestions-loading.css

404 Solution, version 4.1.19. 73 lines.

- Page: https://pluginprobe.com/plugins/404-solution/4.1.19/code/includes/css/suggestions-loading.css
- Raw: https://pluginprobe.com/plugins/404-solution/4.1.19/raw/includes/css/suggestions-loading.css
- Modified: 2026-03-17T21:56:22+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/404-solution/4.1.19/code/includes/css/suggestions-loading.css#L10-L20`.

```css
/**
 * Loading skeleton animation for async 404 suggestions.
 * Displays placeholder animation while suggestions are being computed.
 */

/* Container for loading state */
.abj404-loading {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual skeleton item */
.abj404-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: abj404-shimmer 1.5s infinite;
    height: 20px;
    margin: 10px 0;
    border-radius: 4px;
    list-style: none;
}

/* Vary widths for more natural look */
.abj404-skeleton:nth-child(1) { width: 85%; }
.abj404-skeleton:nth-child(2) { width: 70%; }
.abj404-skeleton:nth-child(3) { width: 90%; }
.abj404-skeleton:nth-child(4) { width: 75%; }
.abj404-skeleton:nth-child(5) { width: 80%; }
.abj404-skeleton:nth-child(n+6) { width: 78%; }

/* Shimmer animation */
@keyframes abj404-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Loading text message */
.abj404-loading-text {
    color: #666;
    font-style: italic;
    margin: 5px 0 10px;
    font-size: 0.95em;
}

/* No suggestions fallback message */
.abj404-no-suggestions {
    color: #666;
    font-style: italic;
    list-style: none;
    padding: 10px 0;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .abj404-skeleton {
        background: linear-gradient(90deg, #2a2a2a 25%, #333333 50%, #2a2a2a 75%);
        background-size: 200% 100%;
    }

    .abj404-loading-text {
        color: #aaa;
    }

    .abj404-no-suggestions {
        color: #aaa;
    }
}

```
