How can I create a progress spinner using HtmlService?

Question

In scriptUi I was able to follow these instructions to create a simple progress spinner for long waits: https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-code-snippets/progress-indicators

I am now using HtmlService to create the Ui and I don't see how I can set up the spinner as I did before.

Answer 1

I found a method. The trick was to call an internal function that both starts the spinner and runs the other function.

html

<script>
  function onSuccess() {
    var div = document.getElementById('result');
    div.innerHTML = '<div>Sucess!</div>';
  }

    function onFailure() {
    var div = document.getElementById('result');
    div.innerHTML = '<div>Fail!</div>';
  }
  function clickAction(){
    var div = document.getElementById('result');
    div.innerHTML = '<div> Copying...<br><img src="https://c4a54d10381f750e81dcc323aed21e2c95725815.googledrive.com/host/0Bwyqwd2fAHMMallsNkNOV0RfcTg/wait_progress.gif"></div>';
  google.script.run
  .withSuccessHandler(onSuccess)
  .withFailureHandler(onFailure)
  .testSpinner();
  }

</script>

<button class="action" onclick="clickAction()"> Copy</button>
<button onclick="google.script.host.close()"> Close</button>
<div id='result'></div>

gs file

function testSpinner(){
 SpreadsheetApp.getActiveSpreadsheet().toast("Copying...","",-1);
  Utilities.sleep(5000);
 SpreadsheetApp.getActiveSpreadsheet().toast("Done.");
}