diff --git a/css/blogolio.css b/css/blogolio.css
index 91f71ee..c4fb1ee 100644
--- a/css/blogolio.css
+++ b/css/blogolio.css
@@ -170,6 +170,24 @@ li {
 .blog-main {
   font-size: 18px;
   line-height: 1.5;
+  position: relative;
+}
+
+.blog-main .loader {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  opacity: 0;
+  background: #fff;
+}
+
+.blog-main.loading .loader {
+  display: block;
+  opacity: .9;
 }
 
 /* Sidebar modules for boxing content */
@@ -473,4 +491,4 @@ input, textarea, keygen, select, button, meter, progress {
   margin-bottom: 10px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index f385e4a..0f182c5 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,7 @@ <h1><a class="blog-title" href="./">The Very Personal Blogolio</a></h1>
       <div id="blog-row" class="row">
 
         <div id="blog-container" class="col-sm-7 blog-main">
+          <div class="loader"></div>
           <div class="main-container"></div>
           <div id="projects-container"></div>
         </div><!-- /.blog-main -->
@@ -306,6 +307,5 @@ <h2>Welcome, {{username}}!</h2>
     <script src="js/bootstrap.min.js"></script>
   	<script src="js/blogolio_bundle.js"></script>
     <script src="js/tinymce.min.js"></script>
-	
   </body>
 </html>
diff --git a/js/blogolio.js b/js/blogolio.js
index dadb80c..dce66d0 100644
--- a/js/blogolio.js
+++ b/js/blogolio.js
@@ -4,6 +4,8 @@ $(function() {
 	
 	//Connection to the Parse Database Webserver.
 	Parse.initialize("EvmOpxAGXkDDS9IOETIptyHZAJDn3Ax7Af3v7VQQ", "doRuBShVrZ9hP6d5lHYWd00SYvxmHVnIBBwm7OxI");
+
+  var loadingState = new (Parse.Object.extend('LoadingState', {}))
 	
 	var $container = $('.main-container'),
 		$sidebar = $('.blog-sidebar'),
@@ -341,11 +343,13 @@ $(function() {
 				'contact': 'contact'
 			},
 			index: function() {
+        loadingState.set({ status: true })
 				this.blogs.fetch({
 					success: function(blogs) {
 						var blogsView = new BlogsView({ collection: blogs });
 						blogsView.render();
 						$container.html(blogsView.el);
+            loadingState.set({ status: false })
 					},
 					error: function(blogs, error){
 						console.log(error);
@@ -367,11 +371,13 @@ $(function() {
 				})
 			},
 			projects: function(){
+        loadingState.set({ status: true })
 				this.projects.fetch({
 					success: function(projects) {
 						var projectsGalleryView = new ProjectsGalleryView({ collection: projects });
 						projectsGalleryView.render();
 						$container.html(projectsGalleryView.el);
+            loadingState.set({ status: false })
 					},
 					error: function(projects, error){
 						console.log(error);
@@ -540,12 +546,20 @@ $(function() {
 		
 	$(document).ready(function(){
 
+    var $container = $('.blog-main')
+    loadingState.on('change:status', function(model, status) {
+      status ? $container.addClass('loading') : $container.removeClass('loading')
+    })
+
+    var $main = $('.main-container')
+
 		//Fade in/out functionalities.
-		$('.main-container').css("display", "none");
-	 
-	    $('.main-container').fadeIn(300);
+		$main
+      .css("display", "none")
+      .fadeIn(300)
 	 
 	    $('a.transition').click(function(event){
+          return
 	        event.preventDefault();
 	        var linkLocation = this.href;
 	        console.log(linkLocation);
diff --git a/js/blogolio_bundle.js b/js/blogolio_bundle.js
index b8f4aa1..9de1d21 100644
--- a/js/blogolio_bundle.js
+++ b/js/blogolio_bundle.js
@@ -1,10 +1,12 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 $(function() {
 
     Parse.$ = jQuery;
 	
 	//Connection to the Parse Database Webserver.
 	Parse.initialize("EvmOpxAGXkDDS9IOETIptyHZAJDn3Ax7Af3v7VQQ", "doRuBShVrZ9hP6d5lHYWd00SYvxmHVnIBBwm7OxI");
+
+  var loadingState = new (Parse.Object.extend('LoadingState', {}))
 	
 	var $container = $('.main-container'),
 		$sidebar = $('.blog-sidebar'),
@@ -342,11 +344,13 @@ $(function() {
 				'contact': 'contact'
 			},
 			index: function() {
+        loadingState.set({ status: true })
 				this.blogs.fetch({
 					success: function(blogs) {
 						var blogsView = new BlogsView({ collection: blogs });
 						blogsView.render();
 						$container.html(blogsView.el);
+            loadingState.set({ status: false })
 					},
 					error: function(blogs, error){
 						console.log(error);
@@ -368,11 +372,13 @@ $(function() {
 				})
 			},
 			projects: function(){
+        loadingState.set({ status: true })
 				this.projects.fetch({
 					success: function(projects) {
 						var projectsGalleryView = new ProjectsGalleryView({ collection: projects });
 						projectsGalleryView.render();
 						$container.html(projectsGalleryView.el);
+            loadingState.set({ status: false })
 					},
 					error: function(projects, error){
 						console.log(error);
@@ -541,12 +547,20 @@ $(function() {
 		
 	$(document).ready(function(){
 
+    var $container = $('.blog-main')
+    loadingState.on('change:status', function(model, status) {
+      status ? $container.addClass('loading') : $container.removeClass('loading')
+    })
+
+    var $main = $('.main-container')
+
 		//Fade in/out functionalities.
-		$('.main-container').css("display", "none");
-	 
-	    $('.main-container').fadeIn(300);
+		$main
+      .css("display", "none")
+      .fadeIn(300)
 	 
 	    $('a.transition').click(function(event){
+          return
 	        event.preventDefault();
 	        var linkLocation = this.href;
 	        console.log(linkLocation);
@@ -651,4 +665,4 @@ function loadTinyMCE() {
 }
 
 
-},{}]},{},[1]);
+},{}]},{},[1])
\ No newline at end of file