I'm looking to add a gif loading onclick or to delete "changing text on click" with an animation with the same button characteristics and a gif overlayed (eg. Searchbox from airbnb) How can i do it?

Thank you!

<input onclick="change()" type="submit" class="submit-form" value="Log in" id="myButton1">

<script type="text/javascript">
    function change() 
        document.getElementById("myButton1").value = "Logging in..."; 
    }
</script>

I'm looking to add a gif loading onclick or to delete "changing text on click" with an animation with the same button characteristics and a gif overlayed (eg. Searchbox from airbnb.) How can i do it?

Thank you!

<input onclick="change()" type="submit" class="submit-form" value="Log in" id="myButton1">

<script type="text/javascript">
    function change() 
        document.getElementById("myButton1").value = "Logging in..."; 
    }
</script>

• javascript
• jquery
• html
• css

4 Answers 4

try with this below code which is having loading image and text as well.

$('#myButton1').click(function(){
      $('#myButton1').hide();
      $('.load').addClass('loading');
        setTimeout(function () { 
        $('.load').removeClass('loading');
        $('#myButton1').show();

      }, 2000);
    });

.loading{
  background-image : url('http://www.fotos-lienzo.es/media/aw_searchautoplete/default/loading.gif');  
  background-repeat:no-repeat;
}
.loading:after {
    content: "Logging in...";
    text-align : right;
    padding-left : 25px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input   type="submit" class="submit-form" value="Log in" id="myButton1">
    <div class="load"></div>

<script type="text/javascript">
    function change() {
        document.getElementById("myButton1").style.background='#000000'; 
    }
</script>

As I can see from your question tags you using JQuery

    function change() 
     $("#myButton1").css({
       background-image:url('PATH/TO/LOADING/IMAGE.gif')
     }); 
    }

and after finish loading you can create a function to stop loading

function stopLoading() 
     $("#myButton1").css({
       background-image:'none'
     }); 
    }

Sorry for the image, it's background is not transparent. I just hope atleast it will give you an idea.

https://jsfiddle/3pmpqpwj/

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <img src='http://www.arabianbusiness./skins/ab.main/gfx/loading_spinner.gif' id='overlay' style="display:none;" />
        <button id="searchbtn" class="btn btn-default" type="button" onclick="change(); alert('test');">Log In</button>

CSS

#overlay{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 2px;
    z-index: 3;
    left: 32px;
}

JS

$('#searchbtn').click(function(){
     $(this).html("Logging in...").prop('disabled',true); 
     $("#overlay").show();
});