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

Question

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 “animate” 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.

Francisco Soto · Accepted Answer · 2010-04-30 08:44:21Z

2

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

edited Apr 30, 2010 at 8:44

answered Apr 30, 2010 at 8:39

Francisco Soto

10.4k2 gold badges40 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tim · Accepted Answer · 2010-04-30 08:43:43Z

1

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

answered Apr 30, 2010 at 8:43

Tim

7,0668 gold badges40 silver badges58 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related