javascript - Turn a button into a loading circle animation -

i reproduce animation below :

http://gph.is/1milwlq

i found not have progress bar (the loading time not defined) :

http://tympanus.net/tutorials/circularprogressbutton/

how can ?

you can add event listener temporarily replace image , have callback of ajax (or whatever happens) perform replacement of it. in example, used settimeout have replace button again after 3 seconds. functionality go inside of ajax callback (or whatever else waiting on):

here's jsfiddle example: https://jsfiddle.net/jetweedy/m0qpm1xh/2/

var mybutton = document.getelementbyid('mybutton'); var myparent = document.getelementbyid('myparent'); mybutton.onclick = function() {     myparent.removechild(mybutton);     var myimage = document.createelement("img");     myimage.src = "http://chimplyimage.appspot.com/images/samples/classic-spinner/animatedcircle.gif";     myparent.appendchild(myimage);     settimeout(function() {         myparent.removechild(myimage);         myparent.appendchild(mybutton);     }, 3000); }; 

an alternative write javascript gradually decrease/increase size, position, color, , other properties while processes whatever it's processing, , (again, inside callback) put stop (by ending setinterval had initiated) after you're done.