Insert gif 'loading' while performing function

Question

I have a Submit button inside a form, which sends an action to another function file. In this file funcoes.php will run a function and return to the current page. While performing this function, after clicking refresh, I would like to insert an animated gif into the center of the page to inform you that it is loading. How would I do this?

Following form:

<form name="cdi" method="post" action="funcoes/funcoes.php" >
                        <h4><i class="fa fa-angle-right"> </i> Indicador CDI <h6>&nbsp;&nbsp;&nbsp;&nbsp; - Atualizado em <?= $dt_atualizacao ?></h6></h4> 
                        <button type="submit" class="btn btn-theme" name="cdi">Atualizar</button>
                      </form>    

Answer 1

Create two divs in your html:

<div id="blanket"></div>
<div id="aguarde">Aguarde...</div>

Next we will apply the css:

#blanket,#aguarde {
    position: fixed;
    display: none;
}

#blanket {
    left: 0;
    top: 0;
    background-color: #f0f0f0;
    filter: alpha(opacity =         65);
    height: 100%;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    opacity: 0.65;
    z-index: 9998;
}

#aguarde {
    width: auto;
    height: 30px;
    top: 40%;
    left: 45%;
    background: url('http://i.imgur.com/SpJvla7.gif') no-repeat 0 50%; // o gif que desejar, eu geralmente uso um 20x20
    line-height: 30px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 9999;
    padding-left: 27px;
}

Then with Jquery just display the div at the click of the button:

$(document).ready(function() {
    $('.btn-theme').click(function(){
        $('#aguarde, #blanket').css('display','block');
    });
});

Or if you don’t want to use Jquery, with the javascript itself on the button:

<button type="submit" class="btn btn-theme" name="cdi" onclick="javascript:document.getElementById('blanket').style.display = 'block';document.getElementById('aguarde').style.display = 'block';">Atualizar</button>

If you use Jquery, don’t forget to import the library.

I hope it helps, hugs

Answer 2

You can make an animation "loading" with CSS only (no GIF images):

@-webkit-keyframes spinning {
    from {transform: rotate(0deg);}
    to   {transform: rotate(180deg);}
}
@keyframes spinning {
    from {transform: rotate(0deg);}
    to   {transform: rotate(180deg);}
}
.square {
    width: 50px;
    height: 50px;
    border-width: 5px;
    border-style: solid;
    border-color: #999 #ccc;
    border-radius: 50px;
    -webkit-animation: spinning 0.75s infinite linear;
    animation: spinning 0.75s infinite linear;
}

<div class="square"></div>