Added indeterminate loading progress.

static/js/com.podnoms.utils.js

@@ -99,6 +99,11 @@ com.podnoms.utils = {
             document.body.appendChild(iframe);
         }
         iframe.src = url;
+    },
+    indeterminateProgress:function (bar) {
+        $(bar).css({ "padding-left": "0%", "padding-right": "90%" });
+        $(bar).animate({ paddingLeft: "90%", paddingRight: "0%" }, 1000, "linear",
+            function () { this.indeterminateProgress(bar); });
     }
 };
 

templates/base.html

@@ -64,8 +64,11 @@
     </div>
     <div class="row-fluid">
         <div class="span8" id="content">
-            <span class="label label-info">Transmogrifying.....</span>
-            <img src="{{ STATIC_URL }}img/transmogrifying.png" class="img-rounded">
+            <h1>Loading</h1>
+
+            <div class="progress progress-striped active">
+                <div class="bar" id="progress-bar"></div>
+            </div>
             {% block content %}
             {% endblock %}
         </div>
@@ -136,6 +139,10 @@
 
 {% block footerscripts %}
 {% endblock %}
-
+<script type="text/javascript">
+    $(document).ready(function () {
+        com.podnoms.utils.indeterminateProgress($('#progress-bar'));
+    });
+</script>
 </body>
 </html>