Skeleton loading shimmer

<div class="skeleton"></div>

:root {
    --base: #2a2d3a;
    --highlight: #3c4150;
    --speed: 1.5s;
}

.skeleton {
    width: 260px;
    height: 88px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        var(--base) 25%,
        var(--highlight) 37%,
        var(--base) 63%
    );
    background-size: 400% 100%;
    animation: shimmer var(--speed) ease-in-out infinite;
}

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

How it works

The shimmer is a wide gradient that slides across the element:

• A horizontal linear-gradient has a brighter band in the middle (--highlight) surrounded by the --base color.
• background-size: 400% makes the gradient much wider than the box, leaving room to move.
• The shimmer keyframes animate background-position from one side to the other, creating the travelling light sweep.

Apply .skeleton to grey boxes shaped like your real content (avatars, lines of text, cards) while data loads, then swap in the content.