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

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 blog or Twitter .