Show Loading Image in the Middle of the Screen

Question

Show Loading Image in the Middle of the Screen

Navigation

#1 by (3 votes)

2

I have a form and typing the zip code shows a loading gif while I load the street, the neighborhood and etc.

The problem is that as the user goes down the form, the loading gif does not appear because it gets stuck at the top of the form giving the impression that the site is locked.

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

I accept other suggestions that fit 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");
    });
});

php javascript html jquery css

asked by anonymous 12.01.2016 / 19:11

1 answer

Doubt with checkbox and PHP ASP.NET vs Intraweb

score 3 · Accepted Answer

Hello, I was going to post a code to do in the hand but neither do I do more, I try very hard.

I advise you to use the block-ui component. Check out 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);varcover=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>