Sometimes, we want to display loading message when an iFrame is loading with CSS.
In this article, we’ll look at how to display loading message when an iFrame is loading with CSS.
How to display loading message when an iFrame is loading with CSS?
To display loading message when an iFrame is loading with CSS, we add a background image behind the iframe.
For instance, we write
<div class="holds-the-iframe"><iframe here></iframe></div>
to add a div with an iframe inside.
Then we style the div by writing
.holds-the-iframe {
background: url(../images/loader.gif) center center no-repeat;
}
to set the background image to the loader icon that’s displayed when we load the iframe.
Once the iframe is loaded, the background image will be covered.
Conclusion
To display loading message when an iFrame is loading with CSS, we add a background image behind the iframe.
