commit aefd024644942ff222897e44768341ca8f8a9ea6 Author: Sathyanarayanan Gunasekaran gsathya.ceg@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>