Show a loading indicator when an iframe is being loaded

This post demonstrates a common case where we show a loading indicator while an iframe is being loaded. It’s always a good practice to let user know what is happening.

Here is our iframe:

<iframe id="frame"></iframe>

The markup

The loading indicator and iframe are organized as following:

<div class="container">
    <!-- The loading indicator -->
    <div class="loading" id="loading">Loading</div>

    <!-- The iframe -->
    <iframe id="frame" style="opacity: 0"></iframe>
</div>

Initially, the iframe will be hidden by setting the opacity to zero. On the other hand, the loading indicator could be displayed at the center and on top of the iframe. We can apply some CSS styles to the container and loading elements:

.container {
    /* To position the loading */
    position: relative;
}

.loading {
    /* Absolute position */
    left: 0;
    position: absolute;
    top: 0;

    /* Take full size */
    height: 100%;
    width: 100%;

    /* Center */
    align-items: center;
    display: flex;
    justify-content: center;
}

Handle the event

The layout looks good now. By default, user will see only the loading indicator. We will hide the loading indicator (or even remove it if you want) as soon as the iframe is loaded:

// Query the elements
const iframeEle = document.getElementById('iframe');
const loadingEle = document.getElementById('loading');

iframeEle.addEventListener('load', function () {
    // Hide the loading indicator
    loadingEle.style.display = 'none';

    // Bring the iframe back
    iframeEle.style.opacity = 1;
});

Source

https://htmldom.dev/show-a-loading-indicator-when-an-iframe-is-being-loaded/