Insert 'loading' gif while executing function [duplicate]

Question

Insert 'loading' gif while executing function [duplicate]

Navigation

#1 by (4 votes)
#2 by (1 votes)

2

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

Follow 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>

php javascript

asked by anonymous 30.10.2015 / 14:27

2 answers

1

You can do a "load" animation with only CSS (without 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>

30.10.2015 / 17:42

Place an image in the center of another image in PHP Specific commit merge

score 4 · Accepted Answer

Create two div's in your html:

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

Next we'll apply 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 do not want to use JQuery, with the javascript itself on the button itself:

<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, do not forget to import the library.

I hope it helps, hugs