better loading animation, loadingMessageHTML option

Author: nikitaeverywhere

example/index.html

@@ -105,6 +105,7 @@
             //, caption: "My table" // if set, table basic caption will be replaced by this text
             , showSummary: true // show summary by columns
             , enableHeadersScrolling: true // enable scrolling both for table and headers
+            //, loadingMessageHTML: "LOADING DATA..." // HTML displaying during data load
             //, conditionalFormattingOn: true // enable conditional formatting rules
             //, drillDownTarget: "<dashboard name>" // undocumented, deepSee only
         };

readme.md

@@ -56,6 +56,7 @@ var setup = { // Object that contain settings. Any setting may be missed.
         [ , caption: "My table" // if set, table basic caption will be replaced by this text ]
         [ , showSummary: true // show summary by columns ]
         [ , conditionalFormattingOn: true // pass false to turn off conditional formatting ]
+        [ , loadingMessageHTML: "LOADING DATA..." // HTML displaying during data load ]
         [ , enableHeadersScrolling: false // enable scrolling both for table and headers. Useful for mobile devices. ]
         [ , drillDownTarget: "<dashboard name>" // deepSee only - dashboard to open ]
     },

source/css/LightPivot.css

@@ -202,4 +202,114 @@
 }
 .lpt-scrollable-y::-webkit-scrollbar {
     display: none;
+}
+
+/* progress bar */
+.lpt-spinner {
+    margin: 100px auto;
+    width: 100px;
+    height: 60px;
+    text-align: center;
+    font-size: 10px;
+}
+
+.lpt-spinner > div {
+    background-color: #555;
+    height: 100%;
+    width: 9px;
+    margin: 0 3px 0 0;
+    display: inline-block;
+
+    -webkit-animation: lpt-stretch 0.8s infinite ease-in;
+    -moz-animation: lpt-stretch 0.8s infinite ease-in;
+    -o-animation: lpt-stretch 0.8s infinite ease-in;
+    animation: lpt-stretch 0.8s infinite ease-in;
+}
+
+.lpt-spinner > div:nth-child(2) {
+    -webkit-animation-delay: -0.7s;
+    -moz-animation-delay: -0.7s;
+    -o-animation-delay: -0.7s;
+    animation-delay: -0.7s;
+}
+
+.lpt-spinner > div:nth-child(3) {
+    -webkit-animation-delay: -0.6s;
+    -moz-animation-delay: -0.6s;
+    -o-animation-delay: -0.6s;
+    animation-delay: -0.6s;
+}
+
+.lpt-spinner > div:nth-child(4) {
+    -webkit-animation-delay: -0.5s;
+    -moz-animation-delay: -0.5s;
+    -o-animation-delay: -0.5s;
+    animation-delay: -0.5s;
+}
+
+.lpt-spinner > div:nth-child(5) {
+    -webkit-animation-delay: -0.4s;
+    -moz-animation-delay: -0.4s;
+    -o-animation-delay: -0.4s;
+    animation-delay: -0.4s;
+}
+
+@-webkit-keyframes lpt-stretch {
+    0%, 40%, 100% {
+        -webkit-transform: scaleY(0.4);
+        -moz-transform: scaleY(0.4);
+        -o-transform: scaleY(0.4);
+        transform: scaleY(0.4);
+    }
+    20% {
+        -webkit-transform: scaleY(1.0);
+        -moz-transform: scaleY(1.0);
+        -o-transform: scaleY(1.0);
+        transform: scaleY(1.0);
+    }
+}
+
+@-moz-keyframes lpt-stretch {
+    0%, 40%, 100% {
+        -webkit-transform: scaleY(0.4);
+        -moz-transform: scaleY(0.4);
+        -o-transform: scaleY(0.4);
+        transform: scaleY(0.4);
+    }
+    20% {
+        -webkit-transform: scaleY(1.0);
+        -moz-transform: scaleY(1.0);
+        -o-transform: scaleY(1.0);
+        transform: scaleY(1.0);
+    }
+}
+
+@-o-keyframes lpt-stretch {
+    0%, 40%, 100% {
+        -webkit-transform: scaleY(0.4);
+        -moz-transform: scaleY(0.4);
+        -o-transform: scaleY(0.4);
+        transform: scaleY(0.4);
+    }
+    20% {
+        -webkit-transform: scaleY(1.0);
+        -moz-transform: scaleY(1.0);
+        -o-transform: scaleY(1.0);
+        transform: scaleY(1.0);
+    }
+}
+
+@keyframes lpt-stretch {
+    0%, 40%, 100% {
+        -webkit-transform: scaleY(0.4);
+        -moz-transform: scaleY(0.4);
+        -o-transform: scaleY(0.4);
+        transform: scaleY(0.4);
+    }
+    20% {
+        -webkit-transform: scaleY(1.0);
+        -moz-transform: scaleY(1.0);
+        -o-transform: scaleY(1.0);
+        transform: scaleY(1.0);
+    }
 }

source/js/DataSource.js

@@ -232,9 +232,7 @@ DataSource.prototype.getCurrentData = function (callback) {
         });
     };
 
-    _.LPT.pivotView.displayMessage(
-        navigator.language === "ru" ? "Ожидание данных..." : "Waiting for data..."
-    );
+    _.LPT.pivotView.displayLoading();
 
     if (this.DATA_SOURCE_PIVOT) {
         this._post(this.SOURCE_URL + "/DataSource"

source/js/PivotView.js

@@ -64,7 +64,7 @@ PivotView.prototype.init = function () {
 
     this.pushTable();
 
-    this.displayMessage(navigator.language === "ru" ? "Загрузка..." : "Loading...");
+    this.displayLoading();
 
     window.addEventListener("resize", function () {
         _.updateSizes.call(_);
@@ -81,6 +81,17 @@ PivotView.prototype.init = function () {
 
 };
 
+PivotView.prototype.displayLoading = function () {
+
+    this.displayMessage(
+        this.controller.CONFIG["loadingMessageHTML"]
+        || "<div class=\"lpt-spinner\">" +
+        "<div></div><div></div><div></div><div></div><div></div>" +
+        "</div>"
+    );
+
+};
+
 PivotView.prototype.updateSizes = function () {
 
     for (var i in this.tablesStack) {
@@ -374,7 +385,6 @@ PivotView.prototype.recalculateSizes = function (container) {
             containerHeight = container.offsetHeight,
             mainHeaderWidth = headerContainer.offsetWidth,
             hasVerticalScrollBar = tableBlock.scrollHeight > containerHeight - headerH,
-            //addExtraTopHeaderCell = tTableHead.offsetWidth > topHeader.offsetWidth,
             addExtraLeftHeaderCell = lTableHead.offsetHeight > containerHeight - headerH
                 && this.SCROLLBAR_WIDTH > 0,
             cell, tr, cellWidths = [], columnHeights = [], i;
@@ -409,13 +419,6 @@ PivotView.prototype.recalculateSizes = function (container) {
         tableBlock.style.height = containerHeight - headerH + "px";
         headerContainer.style.height = headerH + "px";
 
-        //if (false && addExtraTopHeaderCell) {
-        //    tTableHead.childNodes[0].appendChild(cell = document.createElement("td"));
-        //    cell.rowSpan = tTableHead.childNodes.length;
-        //    cell.style.width = this.SCROLLBAR_WIDTH + "px"; // lucky random
-        //    cell["_extraCell"] = true;
-        //}
-
         if (addExtraLeftHeaderCell) {
             tr = document.createElement("tr");
             tr.appendChild(cell = document.createElement("th"));
@@ -431,8 +434,6 @@ PivotView.prototype.recalculateSizes = function (container) {
                 + " bordered";
             cell.colSpan = lTableHead.childNodes.length;
             cell.style.height = this.SCROLLBAR_WIDTH + "px";
-            //cell.textContent = "_"; // cheating
-            //cell.style.lineHeight = headerH + "px"; // lucky random
         }
 
         for (i in tableTr.childNodes) {