Using jQuery to animate a div element with CSS3

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?

Answer №1

What is the purpose behind this action? It seems illogical to proceed in this manner.

If you are seeking information on how to accomplish this using jQuery, refer to .css

var loadingTime = 30; // You can set any desired time
$('#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'
  });
});

This code snippet has not been tested yet, but it is expected to function as intended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Manipulate images in real-time and insert custom text using JavaScript/jQuery

Within my possession is an image depicted above. My objective revolves around dynamically altering the values present at the occurrences of L, A, and B; to achieve this, I must eliminate or conceal L, A, and B while substituting them with numerical equiv ...

HTML <section> Order Placement

I am currently facing an issue with the placement of two divs on my html page. I have a navigation bar and another content div, but they are not appearing in the right order. This is how my html structure looks: <html> <body> <div id="navig ...

The directive in Angular compels the webpage to carry out the added HTML attribute

There is a custom directive in my code that applies the spellcheck attribute to two div elements as shown below: (function(){ 'use strict'; app.directive('spellchecker', spellchecker); spellchecker.$inject = ['$timeout&a ...

Having issues with RTL on MuiTextField when using special characters

Currently, I am working on a project where Mui is being used. I have successfully applied RTL according to the Mui guide. However, I am encountering a frustrating problem where special characters in MuiTextField are aligning to the left instead of the righ ...

What is the best way to eliminate the blue-box-fill when buttons are clicked?

Check out this screen recorded gif on my device showcasing the blue-box-fill I'm referring to: https://i.stack.imgur.com/ajr2y.gif I attempted the following solution: * { user-select: none; -webkit-user-select: none; /* Safari */ -khtml-user-s ...

Can the sidebar be positioned after the div on an HTML page?

Is it possible for the sidebar to remain static until it is reached by scrolling on the page? I want it to be positioned below the Jumbotron and then stick to the left and top when scrolling down. Currently, it's overlapping everything and adjusting z ...

list of key combinations in a ul element

I programmed a list of world states in PHP using an unordered list (<ul>): $WORLD_STATES = array( "France", "Germany", "Greece", "Greenland", "United Kingdom", "United States", "Uruguay" ...

Tips for extracting information from a JSON file using $routeParams in AngularJS

https://i.stack.imgur.com/NQCpy.png I am currently encountering an issue with retrieving data using $routeparams. Here is a description of my problem: Retrieving the URL to redirect console.log($routeParams); console.log($routeParams.json_url); $.getJS ...

Angular 8 is facing an issue where classes defined dynamically in the 'host' property of a directive are not being properly applied to the parent template

In my Angular 8 application, I am working on implementing sorting using the ng-bootstrap table. I referred to the example available at . In the sample, when I hover over the table header, it changes to a hand pointer with a highlighted class applied as sho ...

What happens when you add localhost# to the address bar using <a href="#"?

Playing around with jQuery to toggle visibility of divs on my local server. It works well on a test page, but when integrated into my PHP and HTML app, every time I use <a href="#" as a hook, it actually links to localhost/testsite/localhost# What c ...

Achieve a "upload file" button

I am trying to create an add file button within a sidebar of a standard editor. Here are the steps involved: There is a + button. When clicked, it reveals an input field. The user enters the name of the new file and presses enter on the keyboard to s ...

Trouble arises when attempting to utilize the WCF restful service through an Ajax call

I've created a WCF restful service that has a login method exposed to the outside world. The purpose of this method is to validate user credentials with a database (specifically the login table) and return the result in json format. C# code: [Operat ...

Unable to enclose a table within a div element for Chrome web browser

I attempted to keep a table within a div to ensure that the table's width does not go beyond the width of the containing DIV. This table consists of one row with two elements. The second element is fixed in length, while I want the first element to w ...

My requests are failing because jQuery AJAX does not send hashtag symbols

There's a challenge I'm facing while working with Elixir Phoenix and React.JS. The Token I have includes hashtags, and when I send a request to verify it, the hash symbols and everything after them are not being sent, causing the request to fail. ...

What is the best way to align vertically a horizontal list that includes both headers and icon images?

My goal is to create a horizontal navigation bar that features menu options with headings and icons below them. Upon hovering over each option, the block's background color should change and slightly increase in size. I initially used percentages for ...

Utilizing a PHP-scripted multidimensional array in an AJAX success function

I've encountered an issue while trying to access a multidimensional array passed to my AJAX success function. Here's how I'm sending the data: $response = array(); $response['message']['name'] = $name; $response['m ...

The container's height is determined by the CSS top position of the last child element within the container, with a

I'm attempting to adjust the height of a container based on the position of its last child using Isotope, infinite scroll, and Packery. Below is a snippet of the code: <html> <div id="container" class="variable-sizes isotope" style="p ...

Shut down the popup window

I am diving into the world of jQuery and have successfully created a popup window with a button. However, I am encountering an issue where clicking on the button does not close the popup window as intended. Any guidance or assistance would be greatly app ...

What is the best way to position a div at the bottom of the main div?

How can I position a div with the class "boxLinks" at the bottom of the main box with the class "main-box"? Here's my idea: The main class has a width of 1200px; within this main class, there are 5 divs with each div having a width of 25%. .main- ...

Children divs unexpectedly showing up outside of their parent divs

I have reviewed similar questions on this matter, but none of them seem to provide a solution for the issue I am facing. Currently, my goal is to display a stylized list, but I am encountering more difficulties than expected. You can find a fiddle linked ...