Full Page Loader

Load embedded checkouts more smoothly using a fade-in loader!

Loading short pages that contain an inline checkout can sometimes take a second to load up depending on page speed. This can be smoothed by adding a full-page loader that hides the contents of the page until the page AND Spiffy are loaded.

Add this code to your page AFTER your Spiffy.js code:

<div id="pageLoader"><div class="loader-inner"></div></div>
<script>
var hideLoader = function () {
    // get the loader element
    var loader = document.getElementById('pageLoader')
    // hide the loader
    loader.classList.add('inactive')
    // only run this once!
    spiffy.off('form:size', hideLoader)
}

// run once the checkout is ready
spiffy.on('form:size', hideLoader)
</script>
<style>
    #pageLoader {
        display: flex;
        position: fixed;
        z-index: 999999;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        align-items: center;
        justify-content: center;
        background: white;
    }
    #pageLoader .loader-inner,
    #pageLoader .loader-inner:after {
        border-radius: 50%;
        width: 2.5rem;
        height: 2.5rem;
    }
    
    #pageLoader .loader-inner{
        margin: 50px auto 150px;
        font-size: 4px;
        text-indent: -9999em;
        border-top: 1.1em solid rgba(0, 0, 0, 0.1);
        border-right: 1.1em solid rgba(0, 0, 0, 0.1);
        border-bottom: 1.1em solid rgba(0, 0, 0, 0.1);
        border-left: 1.1em solid #8e8e8e;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
    }
    
    @-webkit-keyframes load8 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes load8 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    #pageLoader.inactive {
        display: none !important;
    }
</style>

Adjusting Loader Hiding

The above code will hide the loader after Spiffy is done loading your checkout, though you can adjust when this triggers by changing the event it triggers on.

You can use any event supported by Spiffy.js for adjusting when the loader hides. You can also scope this event listener to a specific checkout (see full event documentation)

Load right when the checkout is loaded (but may still be painting):

spiffy.on('form:ready', hideLoader)

Load right when Spiffy.js is mounted (may be prior to checkouts being loaded):

spiffy.on('form:ready', hideLoader)