jQuery - Add CSS3 animation to div using jQuery

Question

I have this loader I've created using CSS3 and CSS3 Animations. Although, I want to use jQuery to create the actual loading function (depending on how many seconds I say.)

Example, I want so I can set it to ex. 30 seconds to load the bar to full.

Currently, I have this:

        <div id="loader">
            <div id="bar"></div>
        </div>  
#bar {
    height: 20px;
    width: 0px;

    background: -webkit-linear-gradient(top, #4892D9, #1960BC);
    background: -moz-linear-gradient(top, #4892D9, #1960BC);
    background: -ms-linear-gradient(top, #4892D9, #1960BC);
    background: -o-linear-gradient(top, #4892D9, #1960BC);
    background: linear-gradient(top, #4892D9, #1960BC);

    -webkit-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
    -moz-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
    box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
    -webkit-animation: progress 30s linear forwards;
    -moz-animation: progress 2s linear forwards;
    -ms-animation: progress 2s linear forwards;
    animation: progress 2s linear forwards;
}

When the iFrame is loaded, I want to start the progress bar:

    $('#iframe').load(function() {

    //Code to start animation here
    });

As you can see, the #bar have the css3 animation set to "2s". I want to be able to change this number through jQuery. How can I do that?

Try using jQuery().animate. api.jquery.com/animate

Ali Exalter
– Ali Exalter

2013-09-18 14:29:53 +00:00
Commented Sep 18, 2013 at 14:29 — Ali Exalter
– Ali Exalter, Commented Sep 18, 2013 at 14:29
.animate wouldn't help at all

Zach Saucier
– Zach Saucier

2013-09-18 15:53:40 +00:00
Commented Sep 18, 2013 at 15:53 — Zach Saucier
– Zach Saucier, Commented Sep 18, 2013 at 15:53

Zach Saucier · Accepted Answer · 2013-09-18 15:48:32Z

1

For what purpose? It makes no sense to do so.

Anyway, you're looking for jQuery's .css

var loadingTime = 30; // Whatever time you want
$('#iframe').load(function() {
  $('#bar').css({
    '-webkit-animation' : 'progress ' + loadingTime + 's linear forwards',
    '-moz-animation' : 'progress ' + loadingTime + 's linear forwards',
    '-ms-animation' : 'progress ' + loadingTime + 's linear forwards',
    'animation' : 'progress ' + loadingTime + 's linear forwards'
  });
});

Untested but it should work

answered Sep 18, 2013 at 15:48

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

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

2 Comments

oliverbj Over a year ago

Thanks. This works. Well, it makes sense to do so in my script, since I have a loader made out of css / css3, and I would like to use it like I described.

Zach Saucier Over a year ago

Yes, but why not change the CSS directly? This approach really should only be used if a user is inputting the value for it or something to that extent

Collectives™ on Stack Overflow

jQuery - Add CSS3 animation to div using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related