+ Loading indicator

RubaXa · Apr 10, 2014 · 4f8b7fc · 4f8b7fc
1 parent 853e0a7
commit 4f8b7fc
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 0 deletions.
diff --git a/tutorial/11-jquery-requirejs-finally/app.css b/tutorial/11-jquery-requirejs-finally/app.css
@@ -15,3 +15,55 @@
 		height: 70px;
 		margin: 5px 0 0 5px;
 	}
+
+
+/* Loading */
+.loading {
+	top: 45%;
+	left: 50%;
+	width: 100px;
+	z-index: 10000;
+	position: fixed;
+	text-align: center;
+	margin: -30px 0 0 -50px;
+	padding: 30px 0;
+	border-radius: 5px;
+	background-color: rgba(0,0,0,.5);
+}
+	.loading__ball {
+		display: inline-block;
+		padding: 8px;
+		border-radius: 50%;
+	}
+
+	.loading__ball_left {
+		background: #0063dc;
+		-webkit-animation: loading__ball_left 800ms ease-in-out infinite alternate;
+		animation: loading__ball_left 800ms ease-in-out infinite alternate;
+	}
+
+	.loading__ball_right {
+		background: #ff0084;
+		-webkit-animation: loading__ball_right 800ms ease-in-out infinite alternate;
+		animation: loading__ball_right 800ms ease-in-out infinite alternate;
+	}
+
+	@keyframes loading__ball_left {
+		from {}
+		to { transform: translate(20px, 0); background: #ff0084; }
+	}
+
+	@keyframes loading__ball_right {
+		from {}
+		to { transform: translate(-20px, 0); background: #0063dc; }
+	}
+
+	@-webkit-keyframes loading__ball_left {
+		from {}
+		to { -webkit-transform: translate(20px, 0); background: #ff0084; }
+	}
+
+	@-webkit-keyframes loading__ball_right {
+		from {}
+		to { -webkit-transform: translate(-20px, 0); background: #0063dc; }
+	}
diff --git a/tutorial/11-jquery-requirejs-finally/app.js b/tutorial/11-jquery-requirejs-finally/app.js
@@ -2,6 +2,26 @@
 	var App = Pilot.create({
 		el: '#app', // root view
 
+		subviews: {
+			/**
+			 * Show loading indicator on each query.
+			 */
+			loading: {
+				// Before request
+				loadData: function () {
+					this.$el.stop().delay(100).fadeIn('fast');
+				},
+
+				// After request
+				onRoute: function () {
+					this.$el.stop(true);
+					if (this.$el.is(':visible')) {
+						this.$el.delay(100).fadeOut('fast');
+					}
+				}
+			}
+		},
+
 
 		// Home screen
 		'/': {

diff --git a/tutorial/11-jquery-requirejs-finally/index.html b/tutorial/11-jquery-requirejs-finally/index.html
@@ -22,6 +22,13 @@
 
 	<div id="app">
 
+		<!-- Loading -->
+		<div data-subview-id="loading" class="loading">
+			<span class="loading__ball loading__ball_left"></span>
+			<span class="loading__ball loading__ball_right"></span>
+		</div>
+		<!-- /Loading -->
+
 		<!-- Home -->
 		<div data-view-id="home" style="z-index: 1; display: none;">
 			<header class="bar bar-nav">