How to animate button text? (animation loading type) - jquery?

Question

I have something I want to do, and I want to see what you guys think and how it can be implemented.

I got the form on the page, and the form will imagine to execute some process (run function) in the class.

After clicking the submit button, I want to animate the button text to "SUBMIT ." -> "SUBMIT .." -> "SUBMIT …" -> "SUBMIT …." -> "SUBMIT ….", and then again. Select the "animate" button text.

As soon as the whole process is completed, the button text will again return to the text "SEND".

Please note that I am not looking for a solution for the button with the image, which means that I do not want to implement the image of the animated gif button.

Has anyone done this before or knew how to do this? I have google, but nothing of the kind has been found.

Answer 1

Configure a timer with javascript that will run until the process is complete, make sure it has a flag.

And since you are using jQuery, you can simply $("#button-id").val(nextStep);where nextStep is the next line of animation. Example:

function putAnimation () {
    var b = [".", "..", "..." ];
    var i = 0;

    var a = setInterval(function () {
        $("#button-id").val("SUBMIT " + b[i++]);

        if (stopped) {
            $("#button-id").val("SUBMIT");
            clearInterval(a);
        }
    }, 500);
}

Answer 2

For the animation itself:

$('#submit').click(function() {
  $(this).val("Submit    ").delay(200).val("Submit .").delay(200).val("Submit ..").delay(200).val("Submit ...").delay(200).val("Submit").delay(200);
});