You can simply attach backgroung with CSS to layer below, that when iframe will be ready it will overlap your backgroung with spinner
Last active
April 11, 2023 06:37
-
-
Save itskingori/083dabae1c07cbb2b6b1 to your computer and use it in GitHub Desktop.
How to add an iframe loader without JavaScript stuffs!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="iframe-container"> | |
| <iframe src="https://www.example.com/something_path" width="100%" height="880px" scrolling="no" frameborder="0"> | |
| Browser unable to load ... | |
| </iframe> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .iframe-container{ | |
| min-height: 100px; | |
| background:#fff url("path/to/loader.gif") no-repeat 50% top !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Very Helpful mate thank you so much
I spent dozens of hours searching