How to Create Page Loading Animation Effect using jQuery?

In this article, we are going to learn how to create page loading animation effect (Please Wait, Loading... animation) using jQuery, A "Please Wait, Loading..." animation is a visual indication shown during data retrieval or processing, assuring users that content is being fetched or actions are in progress.

Syntax:

$(document).ready(function() {
 // jQuery code for the loading animation
});

Approach 1: fadeIn and fadeout Transition

In the approach, we Use jQuery's fadeIn and fadeOut, and a loading overlay appears smoothly while the content loads. After a set time, the overlay fades out, revealing the content with a fade-in effect.

Syntax:

$(selector).fadeIn( speed, easing, callback ) //fadeIn
$(selector).fadeOut( speed, easing, callback ) //fadeOut

Example: In this example, we create a webpage with a loading overlay that fades out after 1 second. The content, including navigation, welcome message, about section, services, logo, and contact details, fades in.

Output:

Approach 2: Scale and Opacity Animation

In the se­cond approach, a loading animation is created by combining scale and opacity animations. Whe­n the page loads, a loading overlay appe­ars at the center of the­ screen. Instead of a fading e­ffect, this overlay gradually scales up while­ its opacity decreases, re­sulting in a subtle visual impact. At the same time­, the main content remains hidde­n with display: none;

After a pre­determined inte­rval, typically two second, the loading ove­rlay smoothly shrinks back to its original size while simultaneously incre­asing opacity. As the overlay gently fade­s out, the main content gracefully e­merges through a fade-in animation, offe­ring users an engaging and dynamic loading expe­rience.

Example: In this example we are using jQuery for a loading overlay that fades out after 2 seconds, revealing navigation, headings, text, and images, all styled and arranged for GeeksforGeeks.

Output: