⏳ Preloader

Last thing in this chapter is the addition of a preloader. It will show straight away in the critical CSS to reduce the first paint delay & allow a smoother apparition of elements. We only need a single div with a bit of CSS to add a spinner:

views/layouts/base.twig

<div class="c-preloader"></div>

assets/styles/components/_preloader.scss

.c-preloader {
    position: fixed;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: var(--grid-margin);
    top: 0;left: 0;
    width: 100%;height: 100%;
    z-index: 9999;
    background-color: var(--color-bg);
    transition: opacity $speed $easing;

    // Spinner
    &:before {
        content: '';
        display: block;
        width: 40px;
        height: 40px;
        border: 2px solid;
        border-radius: 50%;
        border-top-color: transparent;
        border-right-color: transparent;
        animation: spin .3s linear infinite;
    }

    // Reveal on load
    html.is-loaded & {
        opacity: 0;
        pointer-events: none;
    }
}

Don't forget to import the file in your assets/styles/critical.scss.

caution

This time, we'll add this file in our critical styles file.

/assets/styles/critical.scss

// ...
@import "components/preloader";