[tor-commits] [compass/master] Add a loading gif while Ajax-ing

[karsten at torproject.org]

commit aefd024644942ff222897e44768341ca8f8a9ea6
Author: Sathyanarayanan Gunasekaran <gsathya.ceg at gmail.com>
Date:   Sun Sep 16 11:47:35 2012 +0530

    Add a loading gif while Ajax-ing
---
 static/css/style.css  |    7 +++++++
 static/img/loader.gif |  Bin 0 -> 1928 bytes
 static/js/custom.js   |    5 +++++
 templates/index.html  |    5 +++--
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..66e0ef6
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,7 @@
+.loading {
+  width: 24px;
+  margin: 0 auto;
+  padding-top: 50px;
+  padding-bottom: 100px;
+  display: none;
+}
\ No newline at end of file
diff --git a/static/img/loader.gif b/static/img/loader.gif
new file mode 100644
index 0000000..521a291
Binary files /dev/null and b/static/img/loader.gif differ
diff --git a/static/js/custom.js b/static/js/custom.js
index 2144e89..d56f90c 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -14,10 +14,15 @@ function addListener(){
 function doAjax(){
     var path = window.location.search;
     if(path) {
+        $('.loading').show();
+        $('html, body').animate({
+            scrollTop: $('.loading').offset().top
+        }, 1000);
         $.ajax({
             url: "result"+path,
             type: "GET",
         }).done(function(data) {
+            $('.loading').hide();
             $('#result').append(data);
             $('html, body').animate({ 
                 scrollTop: $('#result').offset().top
diff --git a/templates/index.html b/templates/index.html
index 9ffe0d2..f0ab694 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,6 +9,7 @@
 
     <!-- Le styles -->
     <link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
     <style type="text/css">
       body {
         padding-top: 60px;
@@ -143,9 +144,9 @@
           </fieldset>
         </form>
       </div>
-      
-      <hr>
 
+      <div class="loading"><img src="{{ url_for('static', filename='img/loader.gif') }}" /></div>
+      <hr>
       <div id="result"></div>
 
       <footer>