Code.gs

function onOpen(e) {
  SpreadsheetApp.getUi().createAddonMenu()
      .addItem('Start', 'showLoginSidebar')
      .addToUi();
}

function onInstall(e) {
  onOpen(e);
}

function showLoginSidebar(){
  var ui = HtmlService.createHtmlOutputFromFile('sidebar')
  .setTitle('Login');
  SpreadsheetApp.getUi().showSidebar(ui);
}

sidebar.html

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<link rel="stylesheet" href="https://drive.google.com/open?id=0B1Y3I4IVa724LVpUVHk2ZWxNQWc&authuser=0">

<button class="blue ladda-button" data-style="zoom-out" id="get-data"><span class="ladda-label">Insert data</span></button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://drive.google.com/open?id=0B1Y3I4IVa724VFJLLXVnZTBxUTA&authuser=0"></script> <!-- spin.min.js -->
<script src="https://drive.google.com/open?id=0B1Y3I4IVa724Sm8tQUU4S1JGWFU&authuser=0"></script> <!-- Ladda.min.js -->
<script src="https://drive.google.com/open?id=0B1Y3I4IVa724Wk5STkpGQVpFd3M&authuser=0"></script> <!-- Ladda.jquery.min.js -->

<script>
  
  /**
   * On document load, assign click handlers to each button.
   */
  $(function() {
    $('#get-data').click(getData);
  });

  
  function getData() {  
    console.log("1");
    // Create a new instance of ladda for the specified button
    var l = Ladda.create( document.querySelector( 'button' ) );
    
    console.log("2");
    // Start loading
    l.ladda( 'start' );
    
    console.log("3");

  }
  
</script>