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.