Add Ajax loder

js/custom.js

@@ -1,23 +1,41 @@
 $(document).ready(function(){
-	$('#submit').click(function(event){	
-		if ( $('#flux').val() != ''){
-			$.ajax({
-				type: 'POST',
-				url: 'generate.php',
-				data: $('#contact_form').serialize(),
-				success: function(data) {
-					if(!data || !data.sucess){
-						show_msg(data.message);
-					}else{
-						$('#rss-lk').html("<br /><br /><a class='btn btn-primary' href='"+data['data'].file+"' target='_blank'>"+data.message+"</a>");
-					}
+	$('#submit').click(function(){	
+		var $this = $(this),
+			$rsslk = $('#rss-lk');
+		var isn = ($('#n').length ? true : false);
+
+		if( $('#flux').val() != ''){
+			$this.attr('disabled', 'disabled');
+			$('html, body').scrollTo($rsslk, 'fast');
+			$rsslk.html("<span class='ajax-loader'></span><span class=''>Génération en cours</span>");
 
-					$('html, body').scrollTo( $('#rss-lk'), 'fast' );
-				},
-				error: function(){
-					show_msg("Impossible de réaliser le traitement distant.");
-				}
-			});
+			setTimeout(function(){
+				$.ajax({
+					type: 'POST',
+					url: 'generate.php',
+					data: $('#contact_form').serialize(),
+					success: function(data) {
+						$this.removeAttr('disabled');
+						if(!data || !data.sucess){
+							$rsslk.empty();
+							show_msg(data.message);
+						}else{
+							$rsslk.html("<br /><br /><a class='btn btn-primary' id='n' href='"+data['data'].file+"' target='_blank'>"+data.message+"</a>");
+							if(isn){
+								$('#n').html(
+									$('#n').text().replace('le lien RSS', 'le NOUVEAU lien RSS')
+								)
+							}
+						}
+
+						
+					},
+					error: function(){
+						show_msg("Impossible de réaliser le traitement distant.");
+					}
+				});
+			}, 1000);		
+			
 		} else {
 			show_msg("Merci de renseigner au moins une URL de flux RSS");
 		}

styles/styles.css

@@ -33,10 +33,6 @@ a, a:visited, a:active {
 a:hover { color:#777;}
 html{
     -webkit-font-smoothing: antialiased;
-	
-    /*font-smooth: always ;
-    text-rendering: optimizeLegibility;
-	text-shadow: 0 0 1px rgba(255,255,255,1);*/
 }
 section{
   width: 100%;
@@ -68,22 +64,28 @@ section:after, header:after {
 .sectionteal {background:#30c3a6;}
 .sectionteal h3, .sectionteal h3 a, .sectionteal h2, .sectionteal h1, .sectionteal p { color:#fff; }
 
+.ajax-loader{
+  width: 64px;
+  height: 64px;
+  display: inline-block;
+  margin: 200px auto;
+  background: url("../img/loader-64.gif") center no-repeat;
+}
+
 header {
   text-align: center;
- background-color: #13c4a5;
-	
- background-position: center top;
-	   -moz-background-size: 1360px auto;           /* Gecko 1.9.2 (Firefox 3.6) */
-		 -o-background-size: 1360px auto;           /* Opera 9.5 */
-	-webkit-background-size: 1360px auto;           /* Safari 3.0 */
-			background-size: 1360px auto;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-
-	   -moz-border-image: url(../img/img-header.jpg) 1360px auto;    /* Gecko 1.9.1 (Firefox 3.5) */
-
-	background-size: 1360px auto;
-	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/img-header.jpg', sizingMethod='scale');
-	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/img-header.jpg', sizingMethod='scale')";
+  background-color: #13c4a5;
+  background-position: center top;
+  -moz-background-size: 1360px auto;           /* Gecko 1.9.2 (Firefox 3.6) */
+  -o-background-size: 1360px auto;           /* Opera 9.5 */
+  -webkit-background-size: 1360px auto;           /* Safari 3.0 */
+  background-size: 1360px auto;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
+  -moz-border-image: url(../img/img-header.jpg) 1360px auto;    /* Gecko 1.9.1 (Firefox 3.5) */
+  background-size: 1360px auto;
+  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/img-header.jpg', sizingMethod='scale');
+  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/img-header.jpg', sizingMethod='scale')";
 }
+
 header .content {
   width: 100%;
   *zoom: 1;
@@ -582,6 +584,13 @@ section article a {
   background-image: -ms-linear-gradient(-90deg, #ffc533 0%, #ffc533 100%);
   background-image: linear-gradient(-90deg, #ffc533 0%, #ffc533 100%);
 }
+
+.contact-form  #question span{
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 16px;
+  color: #323232;
+}
+
 .bottom-shadow {
   background: url(../img/bottom-shadow.png) no-repeat;
   background-position: center top;
@@ -854,8 +863,3 @@ header .content ul li {
   }
 }
 
-#question span{
-  font-family: 'Source Sans Pro', sans-serif;
-  font-size: 16px;
-  color: #323232;
-}