Show a loading indicator when an iframe is being loaded

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

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

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

.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;
}

// 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;
});