Skip to content
STYLESCAPE

Preloader

Preloader Container

The preloader container normally covers the full viewport. Below is a constrained demo.

Loading... 

        <div
            class="ss-c-preloader"
            style="position: relative; width: 100%; height: 200px"
        >
            <!-- Preloader content goes here -->
            <span>Loading...</span>
        </div>

Lines Preloader


        <div
            style="
                position: relative;
                width: 100%;
                height: 200px;
                background: var(--ss-color-surface-alt);
                display: flex;
                justify-content: center;
                align-items: center;
            "
        >
            <div class="ss-c-preloader_lines">
                <div class="ss-c-preloader_line ss-c-preloader_line_1"></div>
                <div class="ss-c-preloader_line ss-c-preloader_line_2"></div>
                <div class="ss-c-preloader_line ss-c-preloader_line_3"></div>
                <div class="ss-c-preloader_line ss-c-preloader_line_4"></div>
                <div class="ss-c-preloader_line ss-c-preloader_line_5"></div>
            </div>
        </div>

Pulse Preloader


        <div
            style="
                position: relative;
                width: 100%;
                height: 200px;
                background: var(--ss-color-surface-alt);
            "
        >
            <div
                class="ss-c-preloader_pulse"
                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
            ></div>
        </div>

Hidden Preloader State

Preloader adds ss-c-preloader--hidden once the page has loaded, which fades the preloader out. ss-c-preloader_hidden removes it from the layout at once (pass it as hiddenClass or data-ss-preloader-hidden-class to use it instead).

This preloader is hidden 

        <div
            class="ss-c-preloader ss-c-preloader_hidden"
            style="position: relative; width: 100%; height: 100px"
        >
            <span>This preloader is hidden</span>
        </div>