diff --git a/homeassistant/components/frontend/www_static/polymer/components/state-timeline.html b/homeassistant/components/frontend/www_static/polymer/components/state-timeline.html
index a5b017628e1..0836e890c47 100644
--- a/homeassistant/components/frontend/www_static/polymer/components/state-timeline.html
+++ b/homeassistant/components/frontend/www_static/polymer/components/state-timeline.html
@@ -8,8 +8,25 @@
     :host {
       display: block;
     }
+
+    #loadingbox {
+      text-align: center;
+    }
+
+    .loadingmessage {
+      margin-top: 10px;
+    }
     </style>
 
+    <div layout horizontal center fit class='login' id="splash" hidden?="{{!isLoading}}">
+      <div layout vertical center flex>
+        <div id="loadingbox">
+          <paper-spinner active="true"></paper-spinner><br />
+          <div class="loadingmessage">{{spinnerMessage}}</div>
+        </div>
+      </div>
+    </div>
+
     <google-jsapi on-api-load="{{googleApiLoaded}}"></google-jsapi>
     <div id="timeline" style='width: 100%; height: auto;'></div>
     <div id="line_graphs" style='width: 100%; height: auto;'></div>
@@ -19,6 +36,8 @@
   Polymer({
     apiLoaded: false,
     stateHistory: null,
+    isLoading: true,
+    spinnerMessage: "Loading data...",
 
     googleApiLoaded: function() {
       google.load("visualization", "1", {
@@ -38,6 +57,7 @@
       if (!this.apiLoaded || !this.stateHistory) {
         return;
       }
+      this.isLoading = true;
 
       var container = this.$.timeline;
       var chart = new google.visualization.Timeline(container);
@@ -244,6 +264,7 @@
         dataTable.addRows(data);
         chart.draw(dataTable, options);
       }
+      this.isLoading = false;
 
     },