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(--color_surface_primary, #f5f5f5);
                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(--color_surface_primary, #f5f5f5);
            "
        >
            <div
                class="ss-c-preloader_pulse"
                style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
            ></div>
        </div>

Hidden Preloader State

Add the preloader_hidden class to hide the preloader after content loads.

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>