Turn a button into a loading circle animation

Question

I would like to reproduce the animation below :

http://gph.is/1MILWlq

I found this but i would not have the progress bar (the loading time will not be defined) :

http://tympanus.net/Tutorials/CircularProgressButton/

How can I do it ?

Answer 1

You can add an event listener to temporarily replace it with an image and then have the callback of the ajax (or whatever happens) perform a replacement of it. In my example, I just used setTimeout to have it replace the button again after 3 seconds. Normally that functionality would go inside of the ajax callback (or whatever else it was waiting on):

Here's a 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 would be to write some JavaScript to gradually decrease/increase its size, position, color, and other properties while it processes whatever it's processing, and then (again, inside the callback) put a stop to all that (by ending a setInterval that you had initiated) after you're done.