Google TimeLine Chart

Trying to get a progressbar to show while the data is loading into the dataTable.

HTML

<script src="https://www.google.com/jsapi?autoload={&#39;modules&#39;:[{&#39;name&#39;:&#39;visualization&#39;,&#39;version&#39;:&#39;1&#39;,&#39;packages&#39;:[&#39;timeline&#39;]}]}"></script>
<h4>TimeLine Chart</h4>
<div id="example1" style="width: 450px; height: 250px;"></div>
<div id='duration'></div>

CSS

.progress-label {
    float: left;
    margin-left: 50%;
    margin-top: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

JavaScript

$(function () {
    
     google.load('visualization', '1', {
         'packages': ['timeline']
     });

     console.log("STEP 001");

     google.setOnLoadCallback(drawChart);

     console.log("STEP 002");

     function drawChart() {
         var container = document.getElementById("example1");
         var chart = new google.visualization.Timeline(container);

         var dataTable = new google.visualization.DataTable();

        dataTable.addColumn('string', 'Term');
        dataTable.addColumn('string', 'Name');
        dataTable.addColumn({ type: 'string', role: 'style' });
        dataTable.addColumn('date', 'Start');
        dataTable.addColumn('date', 'End');

 console.log("STEP 003");
 dataTable.addRow(['FOK!','FOK!', '#06a', new Date(2014, 10, 24, 7, 33, 46, 857), new Date()]);
        dataTable.addRow(['Danny','Danny', '#96c17d', new Date(2016, 10, 24, 7, 33, 46, 857), new Date()]);
         
         
         
console.log("Data Loaded");


var xheight = parseInt($("#timeline div:first-child div:first-child div:first-child div svg").attr( "height"))+70;
        var options = {
            height: xheight,
            timeline: { groupByRowLabel: true, showRowLabels: false }
        }

         chart.draw(dataTable, options);
     }
 });