Merge pull request tsevdos#47 from kbariotis/add-initial-loader

Add initial loader for tsevdos#37
dbaltas · Dec 19, 2015 · 724533e · 724533e
2 parents dbbd377 + 159460b
commit 724533e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 1 deletion.
diff --git a/css/app.css b/css/app.css
@@ -251,3 +251,33 @@ footer li {
 	color: rgba(0, 0, 0, 0.6);
 	background:#fff;
 }
+
+.holder{
+	position: absolute;
+	left: 50%;
+	top: 50%;
+}
+
+.loader {
+	width: 8px;
+	height: 8px;
+	margin: 200px auto;
+	opacity: 0.5;
+	border-radius: 50%;
+	box-shadow:
+	0 -14px 0 rgba(0,0,0,0.8),
+		   10px -10px 0 rgba(0,0,0,0.7),
+		   14px 0px 1px rgba(0,0,0,0.6),
+		   10px 10px 1px rgba(0,0,0,0.5),
+		   0px 14px 2px rgba(0,0,0,0.4),
+		   -10px 10px 2px rgba(0,0,0,0.3),
+		   -14px 0px 3px rgba(0,0,0,0.2),
+		   -10px -10px 3px rgba(0,0,0,0.1);
+	transform-origin: 50%;
+	animation: load 0.5s steps(8, end) infinite;
+}
+
+@keyframes load {
+	0% { transform: rotate(0); }
+	100% { transform: rotate(360deg); }
+}
diff --git a/index.html b/index.html
@@ -12,6 +12,9 @@
 </head>
 <body>
 <div class="wrapper">
+	<div class="loader">
+		<div class="holder"></div>
+	</div>
 	<article id="entry" class="clearfix"></article>
 	<footer class="clearfix">
 		<p>Like this project? Then <a href="https://github.com/tsevdos/greek-in-tech" >contribute</a>!</p>

diff --git a/js/app/router/AppRouter.js b/js/app/router/AppRouter.js
@@ -2,30 +2,35 @@ define([
 	'collections/Entries',
 	'models/Entry',
 	'views/EntriesView',
+	'views/LoaderView',
 	'views/EntryView',
 	'text!data/entries.json',
 	'backbone'
-], function(Entries, EntryModel, EntriesView, EntryView, data) {
+], function(Entries, EntryModel, EntriesView, LoaderView, EntryView, data) {
 
 	return Backbone.Router.extend({
+		loader: new LoaderView(),
 		routes: {
 			'': 'showRandomEntry',
 			'entry/:id(/:title)': 'showEntry'
 		},
 
 		initialize: function() {
+			this.loader.render();
 			this.entriesData = JSON.parse(data);
 			this.entries = new Entries(this.entriesData);
 			var entriesView = new EntriesView({ collection: this.entries });
 			this.listenTo(entriesView, 'routeToUnviewedEntry', this.showEntry);
 		},
 
 		showRandomEntry: function() {
+			this.loader.trigger('hide');
 			var randomEntryID = this.entries.getUnviewedEntryID();
 			this.navigate("entry/" + randomEntryID, { trigger: true });
 		},
 
 		showEntry: function(id) {
+			this.loader.trigger('hide');
 			var entry = this.entries.findWhere({ id : parseInt(id) });
 			this.navigate("entry/" + id + "/" +
 				entry.urlFriendlyTitle(), { trigger: true });

diff --git a/js/app/views/LoaderView.js b/js/app/views/LoaderView.js
@@ -0,0 +1,20 @@
+define([
+	'backbone'
+], function () {
+	return Backbone.View.extend({
+		el: $('.loader'),
+
+		render: function () {
+
+			this.on('hide', this.hideLoader, this);
+
+			return this;
+        },
+
+		hideLoader: function () {
+
+			this.$el.hide();
+		}
+
+	});
+});