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 += '.');

        console.log(submit.html().length);
        console.log(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
    submit.prop('disabled',true).html(loading);


    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...