From db62ecd4cb25decccefa01a94e731c0827140fca Mon Sep 17 00:00:00 2001
From: Arvind <arvindkhadri@gmail.com>
Date: Wed, 3 Sep 2014 15:23:07 +0530
Subject: [PATCH] Adding loading animation to linked-data page.

---
 swtr/static/css/swtmaker.css |   42 ++++++++++++++++++++++++++++++++++++++++++
 swtr/static/js/main.js       |    3 +++
 swtr/templates/index.html    |    6 ++++++
 3 files changed, 51 insertions(+)

diff --git a/swtr/static/css/swtmaker.css b/swtr/static/css/swtmaker.css
index 208624e..f11827a 100644
--- a/swtr/static/css/swtmaker.css
+++ b/swtr/static/css/swtmaker.css
@@ -164,3 +164,45 @@ footer {
     left:100px;
     width: 100%
 }
+
+.spinner {
+    width: 40px;
+    height: 40px;
+
+    position: relative;
+    margin: 100px auto;
+}
+
+.double-bounce1, .double-bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #333;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    -webkit-animation: bounce 2.0s infinite ease-in-out;
+    animation: bounce 2.0s infinite ease-in-out;
+}
+
+.double-bounce2 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+
+@-webkit-keyframes bounce {
+    0%, 100% { -webkit-transform: scale(0.0) }
+    50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: scale(0.0);
+        -webkit-transform: scale(0.0);
+    } 50% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+    }
+}
\ No newline at end of file
diff --git a/swtr/static/js/main.js b/swtr/static/js/main.js
index 85e73bb..8230713 100644
--- a/swtr/static/js/main.js
+++ b/swtr/static/js/main.js
@@ -678,12 +678,15 @@
     id: 'linked-data-container',
     initialize: function() {
       var self = this;
+      this.loader_template = _.template($("#loader-template").html());
+      $("#linked-data-page").prepend(this.loader_template());
       swtr.LDs = new LDSwts();
       swtr.LDs.getAll({
         what: 'img-anno',
         success: function(data) {
           swtr.LDs.add(data);
           if(!swtr.tagCloudView) {
+            $("#spinner").remove();
             swtr.tagCloudView = new TagCloudView({collection: swtr.LDs});
           }
         }
diff --git a/swtr/templates/index.html b/swtr/templates/index.html
index c0d7536..d173fd2 100644
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -403,5 +403,11 @@
         <p><%= who %></p>
       </li>
     </script>
+    <script type="text/template" id="loader-template">
+      <div id="spinner" class="spinner">
+        <div class="double-bounce1"></div>
+        <div class="double-bounce2"></div>
+      </div>
+    </script>
   </body>
 </html>
-- 
1.7.10.4