Jump to content
Search Community

Button Loading Dot Animation Help (. .. ...)

ainsley_clark test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,


Im struggling with something small for a button animation.

I have a button which has a text value of Submit, when clicked, the text is changed to 'Loading'

What I would like to happen is to animate the opacity of three dots fading in (. then .. then ...) using TweenLite but Im struggling to find a way to do it.

I was thinking about using TweenMax's staggerTo passing in a array of dots, but no luck.


I have attached some code that I have been playing around with, sorry its not very polished.


HTML for Button:

<button type="submit" value="Submit">Submit</button>


Using this timeout I half succeeded but I wasnt able to implement GSAP, and it always went back to Loading. instead of Loading

    window.setInterval(function() {
        submit.html(loading += '.');


        if (submit.html().length == 10) {
            loading = 'Loading';

    }, 500);


Full Code:

$('form.ajax').on('submit', function(e) {

    var loading = "Loading";
    var submit = $('button[type=submit]');

    //Disable the submit button to prevent doube submission

    window.setInterval(function() {
    TweenLite.to("#dots", 0.6, {
        opacity: 0

    }, 500);
  	//AJAX Code etc.
    return false;


Thanks for your help in advance.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...