Added progress bar to loading UI

css/loading.css

@@ -1,5 +1,6 @@
 #ui-loading-container {
 	display: flex;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	opacity: 1;
@@ -12,11 +13,11 @@
 		opacity: 0;
 	}
 
-.timer-container {
+.ui-loading-timer-container {
 	position: relative;
 }
 
-.timer {
+.ui-loading-timer {
 	width: 5em;
 	height: 5em;
 	display: flex;
@@ -26,12 +27,12 @@
 	border-radius: 100%;
 	position: relative;
 }
-.timer:before, .timer:after {
+.ui-loading-timer:before, .ui-loading-timer:after {
 	content: '';
 	display: block;
 	position: absolute;
 }
-.timer:before {
+.ui-loading-timer:before {
 	height: .5em;
 	width: .5em;
 	top: -1.48em;
@@ -41,7 +42,7 @@
 	background: #666666;
 	border: .5em solid #f5f5f5;
 }
-.timer:after {
+.ui-loading-timer:after {
 	width: 1em;
 	height: 1em;
 	background: #f5f5f5;
@@ -50,7 +51,7 @@
 	border-radius: 100%;
 }
 
-.hand {
+.ui-loading-hand {
 	background: #666666;
 	height: 1em;
 	width: 1em;
@@ -60,12 +61,12 @@
 	border-radius: 100%;
 	border: 1.3em solid #f5f5f5;
 }
-.hand:before, .hand:after {
+.ui-loading-hand:before, .ui-loading-hand:after {
 	content: '';
 	display: block;
 	position: relative;
 }
-.hand:before {
+.ui-loading-hand:before {
 	width: .325em;
 	height: 1.5em;
 	top: -1.35em;
@@ -94,4 +95,32 @@
 	100% {
 		-moz-transform: rotate(360deg);
 	}
-}
+}
+
+.ui-loading-indicator-container {
+	position: relative;
+	width: 250px;
+	height: 50px;
+	margin: 40px 0 0;
+	background: rgba(0,0,0,0.1);
+	pointer-events: none;
+	overflow: hidden;
+}
+
+.ui-loading-indicator-bar {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	background: #f5f5f5;
+	-webkit-transform: translate3d(-100%, 0, 0);
+	transform: translate3d(-100%, 0, 0);
+	-webkit-transition: -webkit-transform 0.1s linear;
+	transition: transform 0.1s linear;
+}
+
+/*.ui-loading-indicator::before {
+	-webkit-transition: -webkit-transform 5.4s linear 0.3s;
+	transition: transform 5.4s linear 0.3s;
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}*/

src/client/City.js

@@ -59,17 +59,27 @@
 
 		// Load city using promises
 
+		self.publish("loadingProgress", 0);
+
 		// Initialise loading UI
 		this.initLoadingUI().then(function() {
+			self.publish("loadingProgress", 0.1);
+
 			// Initialise debug tools
 			return self.initDebug();
 		}).then(function() {
+			self.publish("loadingProgress", 0.2);
+
 			// Initialise WebGL
 			return self.initWebGL();
 		}).then(function() {
+			self.publish("loadingProgress", 0.3);
+
 			// Initialise DOM events
 			return self.initDOMEvents();
 		}).then(function() {
+			self.publish("loadingProgress", 0.4);
+
 			// Load objects using promises
 			var promises = [];
 
@@ -86,6 +96,7 @@
 			// Set up and start application loop
 			self.loop = new VIZI.Loop();
 
+			self.publish("loadingProgress", 1);
 			self.publish("loadingComplete");
 
 			VIZI.Log("Finished loading city in " + (Date.now() - startTime) + "ms");

src/client/ui/Loading.js

@@ -9,6 +9,7 @@
 
 		this.domContainer = undefined;
 		this.domTimer = undefined;
+		this.domIndicator = undefined;
 	};
 
 	VIZI.Loading.prototype.init = function() {
@@ -16,7 +17,9 @@
 
 		this.domContainer = this.createDOMContainer();
 		this.domTimer = this.createDOMTimer();
+		this.domIndicator = this.createDOMIndicator();
 
+		this.subscribe("loadingProgress", this.progress);
 		this.subscribe("loadingComplete", this.remove);
 
 		deferred.resolve();
@@ -51,23 +54,50 @@
 		VIZI.Log("Creating loading UI timer DOM");
 
 		var timerContainerDOM = document.createElement("div");
-		timerContainerDOM.classList.add("timer-container");
+		timerContainerDOM.classList.add("ui-loading-timer-container");
 
 		var timerDOM = document.createElement("div");
-		timerDOM.classList.add("timer");
+		timerDOM.classList.add("ui-loading-timer");
 
 		var handDOM = document.createElement("div");
-		handDOM.classList.add("hand");
+		handDOM.classList.add("ui-loading-hand");
 
 		timerDOM.appendChild(handDOM);
 		timerContainerDOM.appendChild(timerDOM);
 		this.domContainer.appendChild(timerContainerDOM);
+
+		return timerContainerDOM;
+	};
+
+	VIZI.Loading.prototype.createDOMIndicator = function() {
+		VIZI.Log("Creating loading UI indicator DOM");
+
+		var indicatorContainerDOM = document.createElement("div");
+		indicatorContainerDOM.classList.add("ui-loading-indicator-container");
+
+		var indicatorBarDOM = document.createElement("div");
+		indicatorBarDOM.classList.add("ui-loading-indicator-bar");
+
+		indicatorContainerDOM.appendChild(indicatorBarDOM);
+		this.domContainer.appendChild(indicatorContainerDOM);
+
+		return indicatorBarDOM;
+	};
+
+	VIZI.Loading.prototype.progress = function(fraction) {
+		var position = (-100 + (100 * fraction)) + "%";
+
+		this.domIndicator.style.WebkitTransform = "translate3d(" + position + ", 0, 0)";
+		this.domIndicator.style.MozTransform = "translate3d(" + position + ", 0, 0)";
+		this.domIndicator.style.transform = "translate3d(" + position + ", 0, 0)";
 	};
 
 	VIZI.Loading.prototype.remove = function() {
 		var self = this;
 
-		self.domContainer.classList.add("inactive");
+		setTimeout(function() {
+			self.domContainer.classList.add("inactive");
+		}, 500);
 
 		setTimeout(function() {
 			VIZI.Log("Removing loading UI DOM container");