CODEWITHSUNDEEP
javascripthtmlgoogle-apps-scriptgoogle-sheets
John Grischam
John Grischam

Reputation: 263

Show spinner till data loads in google spreadsheet

I have embedded a google spreadsheet on my website through an iframe. But data take time to load on the spreadsheet. Is there any add-on or a simple script that i can include to my spreadsheet to show a spinning arrow till all data is loaded in my spreadsheet. Otherwise it just shows a white screen for around 5 to 10 seconds.

<iframe name='iframe2' scrolling='no' src='https://docs.google.com/spreadsheets/d/e/2PACX-1vQyRGpXqAZ15m-WEyI6mbCIVZrWssEZcEs8nIu7H0NdwELvvg7hDH4GOBJ7HuLMWQxhDdP8Ft9uQsPe/pubhtml?widget=true&headers=false' style='height: 1000px;width:360px;margin-right: auto; margin-left: auto; text-align:center;background:white;display:block;overflow:hidden;'></iframe>

Upvotes: 0

Views: 517

Answers (2)

Wicket
Wicket

Reputation: 38286

There is no way to add an "add-on or simple script" to add a spinner to the spreadsheet, instead modify the webpage holding the iframe tag as follows,

  1. Add the spinner to your HTML ( you might use a framework for this)
  2. Put the iframe tag as a children of another tag, i.e. a div, and hide it using style="visibility:hidden;".
  3. Use the window load event to remove the spinner by using style.display = 'none' and turn the visibility of the iframe parent to visible.

The following sample use Bootstrap for the spinner.

window.onload = () => {
  document.querySelector('iframe').parentNode.style.visibility = 'visible'
  document.querySelector('.spinner-border').style.display = 'none' 
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div style="visibility:hidden;">
   <iframe name='iframe2' scrolling='no' src='https://docs.google.com/spreadsheets/d/e/2PACX-1vQyRGpXqAZ15m-WEyI6mbCIVZrWssEZcEs8nIu7H0NdwELvvg7hDH4GOBJ7HuLMWQxhDdP8Ft9uQsPe/pubhtml?widget=true&headers=false' style='height: 1000px;width:360px;margin-right: auto; margin-left: auto; text-align:center;background:white;display:block;overflow:hidden;'></iframe>
</div>

Upvotes: 0

liminor
liminor

Reputation: 196

i'm not sure, but maybe you're looking for something like this:

let spinner = true; 
document.querySelector("iframe").addEventListener("load", () => {
  console.log("iframe content loaded");
  spinner = false;
});

found the implementation here

i've created a sandbox here - it fails to find the iframe on the initial load (i think due to the implementation of the sandbox site itself), but if you click refresh in the preview window, it works as expected

Upvotes: 2

Related Questions