• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
JavaScriptSource

JavaScriptSource

Search 5,000+ Free JavaScript Snippets

  • Home
  • Browse Snippets
    • Addon
    • Ajax
    • Buttons
    • Cookies
    • CSS
    • Featured
    • Forms
    • Games
    • Generators
    • Image Effects
    • Math Related
    • Miscellaneous
    • Multimedia
    • Navigation
    • Page Details
    • Passwords
    • Text Effects
    • Time & Date
    • User Details
Home / Miscellaneous / Show a loading indicator when an iframe is being loaded

Show a loading indicator when an iframe is being loaded

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/

Miscellaneous

Related Snippets:

  • Remove duplicate items from an array
  • Convert a string to an array of characters
  • Check if the given argument is a string
  • Insert an element before another one

Primary Sidebar

FREE UPDATES!

Get the latest updates in your inbox for FREE!

Popular Posts

Story Generator

IP Grabber – get a users IP address with JavaScript

Simple Calendar

Remove Ads

Astrological Calculator

Copyright © 2023 JavaScriptSource.com

  • About
  • Privacy Policy
  • Submit
  • FAQ
  • Jobs For Developers
  • Contact Us