After creating a loader using CSS3 and CSS3 Animations, I am looking to implement the actual loading function with jQuery based on a specified duration. For instance, setting it to load fully in 30 seconds.
This is what I currently have:
<div id="loader">
<div id="bar"></div>
</div>
#bar {
height: 20px;
width: 0px;
//CSS styles here
-webkit-animation: progress 2s linear forwards;
-moz-animation: progress 2s linear forwards;
-ms-animation: progress 2s linear forwards;
animation: progress 2s linear forwards;
}
When the iFrame finishes loading, I want to initiate the progress bar:
$('#iframe').load(function() {
//Code to start animation here
});
The #bar element currently has the css3 animation set to "2s". How can I dynamically change this number using jQuery?