Skip to content
  • There are no suggestions because the search field is empty.

How-to: Implement a Loading Spinner for My Trip Embed Cards?

If you are embedding a Youli trip cards into your website, you may want to display a loading spinner so visitors see a clear indicator while the embed loads. This guide walks you through.

Why You Should Load the Embed Asynchronously

When embedding YouLi trip embed cards, loading it synchronously can cause your page content to pause or block until the script is fully loaded.

To avoid this, it’s important to ensure:

✔ The script loads asynchronously
✔ Your page layout and content continue rendering normally
✔ Users see a spinner while waiting for the embed to appear

To enable this behavior, the YouLi embed script must include the async attribute.

Add the async Attribute to Your Trip Embed Script

Your embed script should look something like this:

<script src="https://trips.domain.com" async></script>

The async attribute ensures:

  • Your page continues loading while the embed loads in the background

  • The browser does not block rendering of other scripts or content

  • The spinner remains visible until the embed is ready

How to Implement a Loading Spinner

You can display a spinner while the embed cards loads, then hide it automatically once the embed script finishes loading.

Use the sample implementation below.

<div class="no-overlay trip-embed">
    <div id="youli-loading-spinner" class="loading-spinner">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <script src="https://trips.domain.com" async onload="document.getElementById('youli-loading-spinner').style.display='none';"></script>
</div>

<style>
    .loading-spinner {
        display: flex;
        justify-content: center;
        padding: 2rem 0;
    }
    .spinner-border {
        width: 3rem;
        height: 3rem;
        border: 0.25rem solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-border .75s linear infinite;
    }
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
    }
    @keyframes spinner-border {
        to { transform: rotate(360deg); }
    }
</style>

How It Works

  • The spinner appears immediately when the page loads.

  • The embed script loads in the background (async).When the script finishes loading, the onload event fires:

document.getElementById('youli-loading-spinner').style.display = 'none';

  • The spinner disappears, and the full trip embed cards displays.