put a load with jQuery on the button

1

I have a very simple button, but I wanted to know if it is possible to put a loading button when it is clicked. I wanted to use jquery.

Follow the code for my button.

.button {
    margin-top: 12px;
    margin-right: 20px;
    border: 0;
    padding: 5px;
    width: 100px;
    height: 42px; 
    cursor: pointer;
    border-radius: 4px;
    color: #FFFFFF; 
  background-color: #FBBC05 !important;
}
<form name="form" action="#">
  <button type='submit' class="button">GERAR</button>
</form>
    
asked by anonymous 22.11.2016 / 17:27

1 answer

2

As for the button you could insert an image inside when clicking.

$(".button").click(function() {
  $(this).html("<img src='http://cdn-frm-us.wargaming.net/4.5/style_images/wg/ajax_loading.gif' />");
});
.button {
  margin-top: 12px;
  margin-right: 20px;
  border: 0;
  padding: 5px;
  width: 100px;
  height: 42px;
  cursor: pointer;
  border-radius: 4px;
  color: #FFFFFF;
  background-color: #FBBC05 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formname="form" action="#">
  <button type='submit' class="button">GERAR</button>
</form>
    
22.11.2016 / 17:38