Iframe loading spinner/progress bar using javascript-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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" onl oad="closeIndicator()" src="https://stackoverflow.com/" >
</iframe>
<img id="spinner" src="spinnder.gif" />