Merge pull request #67 from mapbox/loadbar

Add loadbar
mapbox · Feb 19, 2018 · 6b161d3 · 6b161d3
2 parents bb96446 + f6cc139
commit 6b161d3
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/src/ts/mapboxMap.ts b/src/ts/mapboxMap.ts
@@ -256,6 +256,7 @@ module powerbi.extensibility.visual {
 
     export class MapboxMap implements IVisual {
         private map: mapboxgl.Map;
+        private initDiv: HTMLDivElement;
         private mapDiv: HTMLDivElement;
         private errorDiv: HTMLDivElement;
         private host: IVisualHost;
@@ -322,7 +323,16 @@ module powerbi.extensibility.visual {
 
         constructor(options: VisualConstructorOptions) {
             this.host = options.host;
-            //Map initialization
+
+            this.initDiv = document.createElement('div');
+            this.initDiv.className = 'full';
+
+            let loaderDiv = document.createElement('div');
+            loaderDiv.className = 'loader';
+
+            this.initDiv.appendChild(loaderDiv);
+            options.element.appendChild(this.initDiv);
+
             this.mapDiv = document.createElement('div');
             this.mapDiv.className = 'map';
             options.element.appendChild(this.mapDiv);

diff --git a/style/visual.less b/style/visual.less
@@ -7,6 +7,30 @@
         }
     }
 
+    .full {
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        position: absolute;
+    }
+
+    .loader {
+    	position: relative;
+    	margin-left: auto; 
+    	margin-right:auto;
+    	border: 16px solid #f3f3f3; /* Light grey */
+	    border-top: 16px solid #3498db; /* Blue */
+	    border-radius: 50%;
+        height: 100px;
+        width: 100px;
+	    animation: spin 2s linear infinite;
+	}
+
+	@keyframes spin {
+	    0% { transform: rotate(0deg); }
+	    100% { transform: rotate(360deg); }
+	}
+
     .map {
         position: absolute;
         top: 0;