Add-on spinner

If your Add-on needs to execute a google.script.run() to go back to Apps to do something, like get or update data, that might take a little while to do. In these cases, it's good to show a spinner in your sidebar for the duration.

One way is to change the cursor style to a spinner, but better just to plant a spinner gif in the middle of your add-in. 

Here's a pre-baked one you can use. You can try it out at this jsfiddle or below.


CSS


The styling is all about getting the spinner in the center of the page and is self explanatory from the comments below

.spinner {
    
    /* center the spinner and make sure its on top- but hide it*/
    position:absolute;
    top:50%;
    left:50%;
    z-index:500;
    display:none;
    
    /* spinner image */
    width:28;
    height:28;
    
    /* adjust positioning by half size of image */
    margin-left: -14px;
    margin-top: -14px;
}

JavaScript

In this demo example I just use a button to turn the spinner off and on. In your Add-on you'd use kicking off and getting the result from google.script.run() as the triggers for hiding and showing the spinner - something like this

function startSpinner () {
    document.getElementById('spinner').style.display = "block";
}

function stopSpinner () {
    document.getElementById('spinner').style.display = "none";
}

function goToGoogle () {

    startSpinner();

    google.script.run
        .withSuccessHandler (function(result) {
            //do something with the result
            stopSpinner();
        })
        .withFailureHandler(function(error) {
            //do something with the error
            stopSpinner();
        })
        .yourFunction (yourArgs);

}

HTML

You just need a div with the spinner class, containing the image you want to use as a spinner. You can use mine if you like.
<div class="content">
   
    <div id="spinner" class="spinner">
        <img src="https://googledrive.com/host/0B92ExLh4POiZfkZsSDMwaHZUV3hneWdEbVV5aWVqenpWNjYtc29oYUZyYzVKVE50eFBMQm8/ajax-loader.gif"/>   
        
    </div> 
    
</div>

For more like this, see  Google Apps Scripts snippets. Why not join our community , follow the blogtwitterG+  .

You want to learn Google Apps Script?

Learning Apps Script, (and transitioning from VBA) are covered comprehensively in my my book, Going Gas - from VBA to Apps script, available All formats are available now from O'Reilly,Amazon and all good bookshops. You can also read a preview on O'Reilly

If you prefer Video style learning I also have two courses available. also published by O'Reilly.
Google Apps Script for Developers and Google Apps Script for Beginners.



Comments