Skeleton screen

Here is the skeleton screen I built for Hugo quote flow.

See the Pen by Teo Dragovic (@teodragovic) on CodePen.

That was my first time making one. Thankfully, this CSS-Tricks article helped me get the basics of it.

I didn’t use custom properties but I did use some other tricks. Since you can’t make rounded corners using linear gradients, for rounded shapes I used SVG instead.

$rectangle: svg-url('<svg viewBox="0 0 420 60" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><rect width="420" height="60" rx="6" fill="#ECECED" /></svg>');

Here, I made a simple SVG rectangle with rounded borders and saved encoded SVG in Sass variable so I can use it as a background image. For encoding, I used Sass function from this super useful pen by Jakob. I’ve been using that pen for years, every time I needed to encode SVG into CSS.

From there, I defined background-image, background-size and background-position for each of four gray shapes that replace pending content on the screen. Note that the first set of values in background properties define the vertical line used for animation. That’s the only value that changes inside @keyframes block.

Here is the full code for my skeleton screen (minus SVG encode functions):

$rectangle: svg-url('<svg viewBox="0 0 420 60" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><rect width="420" height="60" rx="6" fill="#ECECED" /></svg>');

.c-skeleton {
    height: 100%;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(
            90deg,
            transparent 20%,
            rgba(#FFF, 0.6),
            transparent 80%
        ),
        linear-gradient(#ECECED 25px, transparent 0),
        linear-gradient(#ECECED 10px, transparent 0),
        $rectangle,
        $rectangle;
    background-size:
        40% 100%,
        100% 25px,
        50% 10px,
        100% 60px,
        100% 60px;
    background-position:
        -150% 0,
        0 0,
        0 35px,
        0 75px,
        0 150px;
    animation:
        loading 1.8s ease-out infinite,
        show 0.3s ease-out forwards;
}

@keyframes loading {
    to {
        background-position:
            150% 0,
            0 0,
            0 35px,
            0 75px,
            0 150px;
    }
}