<style>

    .preloader {
        display: block;
        z-index: 1030;
        padding: .5rem 15px;
        overflow: hidden;
    }

    .preloader::before {
         content: '';
         background: #000000;
         opacity: .5;
     }

    .preloader,
    .preloader::before {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .preloader__modal {
         background: #FFFFFF;
         pointer-events: none;
         transform: translate(0, 0);
         border-radius: .3rem;
         max-width: 100%;
     }

    .preloader__content {
         text-align: center;
         padding: 90px 20px;
     }

    .preloader__text {
         font-size: 1rem;
         line-height: 1.5rem;
     }

    @media screen and (min-width: 768px) {
        .preloader {
            display: none;
        }
    }
</style>

<div class="preloader" id="checkout-loader-modal">
    <div class="preloader__modal">
        <div class="preloader__content">
            <div class="preloader__text">Please wait</div>
            {{> loading-truck-animation}}
            <div class="preloader__text">We are retrieving your delivery options.</div>
        </div>

    </div>
</div>
