diff --git a/README.md b/README.md
index c5419e2..0ddcdc1 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,10 @@ As we'll be either pulling in parts of [Bootstrap](http://bootstrap.io) or at th
 
 For those new to Less, it's worth checking out [SimpLESS](http://wearekiss.com/simpless) (which runs on all platforms) which watches and compiles Less into CSS.
 
+#########
+Loading animation added
+Added a gif file in the images folder.
+
 ### Node.js
 Included in the `node` folder is a script for creating a template website using the metro.css theme in Node.js  
 With node installed on your system, run the following commands
diff --git a/images/loader.gif b/images/loader.gif
new file mode 100644
index 0000000..8364692
Binary files /dev/null and b/images/loader.gif differ
diff --git a/less/bootstrap/progress-bars.less b/less/bootstrap/progress-bars.less
index 6928e5f..5cda49f 100644
--- a/less/bootstrap/progress-bars.less
+++ b/less/bootstrap/progress-bars.less
@@ -94,4 +94,22 @@
 }
 .progress-info.progress-striped .bar {
   #gradient > .striped(#5bc0de);
-}
\ No newline at end of file
+}
+
+//LOADING ANIMATIONS
+//------------------
+
+//LOADING ANIMATION 1
+
+.spinner {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    margin-left: -50px;
+    margin-top: -50px;
+    text-align:center;
+    z-index:1234;
+    overflow: auto;
+    width: 100px;
+    height: 102px;
+}
diff --git a/less/metroblog.less b/less/metroblog.less
index f9e0429..b2a9e50 100644
--- a/less/metroblog.less
+++ b/less/metroblog.less
@@ -58,4 +58,4 @@ section.title { float: left; font-size: @baseFontSize * 4; }
 
 nav { float: right; margin-left: 140px; margin-top: 20px; margin-bottom: 20px; }
 
-nav  a:hover { color: black; }
+nav  a:hover { color: black; }
\ No newline at end of file