Tenho um formulário e ao digitar o CEP mostro um gif de loading enquanto carrego a rua, o bairro e etc.
O problema é que conforme o usuário vai descendo o formulário, o gif do carregamento não aparece, pois fica "preso" na parte de cima do formulário dando a impressão que o site está travado.
Gostaria que a imagem de carregamento acompanhe a tela, aparecendo exatamente no meio da tela, para que o usuário veja que está acontecendo um carregamento.
Aceito outras sugestões que se adequem ao caso.
HTML/PHP:
<div id="loader" class="loader" style="display: none">
<img width="35px" height="35px" src="{{ asset('img/ajax-loader.gif') }}" class="img-responsive center-block" alt="loader">
</div>
<div class="form-group">
<label for="cep">CEP:</label>
<input type="text" id="cep" name="cep" class="form-control important" value="{{ old('cep') }}">
</div>
Script:
$('#cep').on('blur', function(){
var f_empresa_nova = $('#f_empresa_nova').serializeArray();
var url = "/cep";
loader('on');
$.post(url, f_empresa_nova, function(data){
loader('off');
$('#logradouro').val(data.logradouro);
$('#bairro').val(data.bairro);
$('#cidade').val(data.cidade);
$('#uf').val(data.uf);
$('#cep').removeClass();
$('#cep').addClass("form-control required");
});
});