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