title: Loading effect on google chart refresh
body: <p>I have a page with multiple google charts. I also have a drop-down at page level. I refresh/ reload the charts when user changes values from this drop-down. </p>
  
  <p>Everything is working fine but there is a few seconds delay between value selection and charts update. I want to show a loading effect overlay and image on the page before all charts are refreshed. </p>
  
  <p>The problem is that I am unable to overlay this effect on top of google charts. The loading effect javascript does trigger and the background gets greyed, but loading image is hidden behind the charts.</p>
  
  <p>Jsfiddle for the problem: <a href="https://jsfiddle.net/0tj1pzsk/14/" rel="nofollow">https://jsfiddle.net/0tj1pzsk/14/</a></p>
  
  <p>How can I overlay spinner image on top of google charts? Placing spinner image inside chart div will only display it for the first chart load and not subsequent refreshes</p>
  
  <p><strong>Code:</strong></p>
  
  <p>CSS</p>
  
  <pre><code>#loading-img {
    background: url(https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif) center center no-repeat;
    height: 100%;
    z-index: 20;
  }
  
  .loading {
    background: #a3a3a3;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
  }
  
  Javascript
  
  $('#test').click( function() {
    $('.loading').show(); 
  });
  
  google.charts.load("current", {packages:['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.arrayToDataTable([
      ['Threat', 'Attacks'],
      ['Chandrian', 38],
      ['Ghosts', 12],
      ['Ghouls', 6],
      ['UFOs', 44],
      ['Vampires', 28],
      ['Zombies', 88]
    ]);
  
    var options = {
      legend: 'none',
      colors: ['#760946'],
      vAxis: { gridlines: { count: 4 } }
    };
  
    var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
    chart.draw(data, options);
  };
  
   html
  
   &lt;button id="test"&gt;test&lt;/button&gt;
   &lt;div class="loading"&gt;&lt;div id="loading-img"&gt;&lt;/div&gt;&lt;/div&gt;
   &lt;div id="line-chart"&gt;&lt;/div&gt;
  </code></pre>