Animação de carregamento ao enviar formulário

[PedroNunes 0]

Coloquei o plugin [Pace Master](http://github.hubspot.com/pace/docs/welcome/) em minha página que faz uma barra carregar na parte superior enquanto a página esta carregando, como a do YouTube, entretanto, quero fazer com que essa mesma barra carregue ao enviar o formulário que contém na página, caso ele esteja devidamente preenchido. Ja vi isso em uma infinidade de sites, e parece ser bem simples mas não tenho muito conhecimento em JavaScript ainda, por isso das formas que tentei não funcionou.  Tentei chamar a função do loading com onclick mas não funcionou, estava querendo que funcionasse no mínimo sem verificar se o form esta preenchido pois o principal seria que o usuário tivesse um feedback quando clicasse em enviar o form.
 

 

-HTML COM PARTE DO FORM-

<label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> <textarea name="questao5" id="questao5" required></textarea> <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button>

<label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> <textarea name="questao5" id="questao5" required></textarea> <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button>

-CSS DO PLUGIN-

.pace {
-webkit-pointer-events: none;
pointer-events: none;

-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #8BB006;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

-JavaScript do plugin-
Link GitHub

 

-JavaScript do formulário-

$('.formphp').on('submit', function() {
	var emailContato = "contato@tenshitech.com.br"; // Escreva aqui o seu e-mail

	var that = $(this),
			url = that.attr('action'),
			type = that.attr('method'),
			data = {};
	
	that.find('[name]').each(function(index, value) {
		var that = $(this),
				name = that.attr('name'),
				value = that.val();
				
		data[name] = value;
	});
	
	$.ajax({
		url: url,
		type: type,
		data: data,
		success: function(response) {
		
			if( $('[name="leaveblank"]').val().length != 0 ) {
				$('.formphp').html("<div id='form-erro'></div>");
				$('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>")
				.hide()
				.fadeIn(1500, function() {
				$('#form-erro');
				});
			} else {
			
				$('.formphp').html("<div id='form-send'></div>");
				$('#form-send').html("<span>Mensagem enviada!</span><p>Em breve eu entro em contato com você. Abraços.</p>")
				.hide()
				.fadeIn(1500, function() {
				$('#form-send');
				});
			};
		},
		error: function(response) {
			$('.formphp').html("<div id='form-erro'></div>");
			$('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>")
			.hide()
			.fadeIn(1500, function() {
			$('#form-erro');  
		});
		}
	});
	
	return false;
});