Replace button with a loading gif

Question

Im trying to replace the submit button with a loading.gif but I cannot in anyway put it in the same place. It looks like that the button is hidden but the space is still reserved.

My html is

<div class="botao">
  <input type="image" disabled src="images/bl_button.jpg" id="bt_pagamento" alt="EFETUAR PAGAMENTO" title="EFETUAR PAGAMENTO" /> 
</div>
<div class="loading">
  <input type="image" src="images/loading.gif" id="bt_loading" alt="CARREGANDO PAGAMENTO" title="CARREGANDO PAGAMENTO" />
</div>

My jQuery code is:

$("#bt_pagamento").click(function () {
                                      $(this).css({'display':'none'});
                                     $("#bt_loading").show();
                });

And my CSS is:

#main_content .pagamentos .botao {
width: 151px;
height: 33px;
float: left;
margin: 20px 0 20px 325px;
text-align: center;
}

#main_content .pagamentos .loading {
width: 151px;
height: 33px;
float: left;
margin: 20px 0 20px 325px;
text-align: center;
}

Could someone give me some help on it?

Answer 1

I think the best solution is instead of adding a seperate "loading" element, just add a class to your button that makes the button appear as a loading icon.

For example: http://jsfiddle.net/4rLgw/1/

HTML:

<div class="botao">
   <button id="bt_pagamento" class="bl_button" title="EFETUAR PAGAMENTO"></button>
</div>

CSS:

.bl_button {
    background: url('images/bl_button.jpg') no-repeat 50% 50%;
    height: 35px; /* height of your button image */
    width: 100px; /* width of your button image */
}

.button_loading {
    background: url('images/loading.gif') no-repeat 50% 50%;
    /* apply other styles to "loading" buttons */
}

jQuery:

$("#bt_pagamento").click(function () {
    $(this).addClass('button_loading');
});

Here is a working example: http://jsfiddle.net/4rLgw/1/

When the button is clicked, the .button_loading class is applied to the button, and the background image is changed to the ajax loading icon. You can also add specific styling to the loading button to make it look more unique.