Show Middle Screen Upload Image

Question

I have a form and when typing the ZIP code I show a gif of loading while I carry the street, the neighborhood and etc.

The problem is that as the user descends the form, the gif of the load does not appear, as it is "stuck" at the top of the form giving the impression that the site is stuck.

I would like the upload image to follow the screen, appearing exactly in the middle of the screen, so that the user can see that a load is happening.

I accept other suggestions that suit the case.

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");
    });
});

Answer 1

Hello, I was going to post a code to do in the hand but neither do I more, too much effort for little thing.

I advise you to use the component block-ui. Look at this jsFiddler .

//UI block
window.onload = function() {
    
    var blockUI = document.createElement("div");
    blockUI.setAttribute("id", "blocker");
    blockUI.innerHTML = '<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>'
    document.body.appendChild(blockUI);
    
    
    var cover = document.getElementById("blocker").style.display = "none";
    
    var btn = document.getElementById("bloc");
    
    btn.onclick = block;
    
    function block()
    {
        document.getElementById("blocker").style.display = "";
        setTimeout(function()
        {
        document.getElementById("blocker").style.display = "none";
        }, 3000);
    }
}

#blocker
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background-color: #000;
    z-index: 1000;
    overflow: auto;
}
    #blocker div
    {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5em;
        height: 2em;
        margin: -1em 0 0 -2.5em;
        color: #fff;
        font-weight: bold;
    }
    
    #blocker img
    {
        position: relative;
        top: -55px;
        left: 15%;
    }

<button id="bloc">Block UI</button>