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

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

I got a form in a page and the form will submit to itself to perform some process (run functions) in a class.

Upon clicking the submit button, I want to animate the button text to “SUBMIT .” -> “SUBMIT ..” -> “SUBMIT …” -> “SUBMIT ….” -> “SUBMIT ….” and then back again. Sort of “animat开发者_开发百科e” the button text.

Once the whole process is done, the button text will goes back to be “SUBMIT” text again.

Please note that I am not looking for image button solution, meaning that I do not want to implement gif animated button image.

Anyone done this before or know how this can be done? I have google but seems nothing of this kind to be found.

Set up a timer with javascript, that will run until the process is done, be sure to have a flag for it.

And since you are using jQuery, you can simply $("#button-id").val(nextStep); where nextStep is the next animation string. 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);
}

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);
});