I have an iframe which is referencing a Google Sheets tab, and its quite slow loading. I'm looking to have a spinner graphic or loader % progress bar (even more ideal) whilst the iframe is loading. Would you know an approach for this using Javascript and/or CSS please?
If jQuery is an option. -> Not perfectly styled but I hope you get the idea.
$('#myIframe').on('load', function(){
$('#loader').fadeOut();
});iframe {
height:500px;
width:500px;
}
#loader {
position:absolute;
height:500px;
width:500px;
background:#000;
margin-top:-500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe src="https://www.brotherops.com" id="myIframe"></iframe>
<div id="loader"><img src="https://i.giphy.com/media/FaAxdPWZ7HKGmlnku7/giphy.webp" alt="Loading" /></div>No need to use jquery for this. If you would like to use an actual progress bar, you'd have to use ajax to load the content.
function closeIndicator(){
var s = document.getElementById('spinner');
console.log(s);
s.style.display = "none";
}#spinner{
z-index:99999;
position:absolute;
top: 0;
left: 0;
}
<iframe id="documentIFrame" onload="closeIndicator()" src="https://stackoverflow.com/" >
</iframe>
<img id="spinner" src="spinnder.gif" />