How to Create Page Loading Animation Effect using jQuery?
Last Updated :
23 Jul, 2025
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Welcome to GeeksforGeeks</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js ">
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f7f7f7;
color: #333;
}
nav {
background-color: #333;
color: white;
padding: 10px 0;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: white;
transition: color 0.3s ease-in-out;
font-size: 22px;
}
nav ul li a:hover {
color: #3498db;
}
.loading-overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loading-text {
font-size: 18px;
margin-top: 10px;
color: #333;
}
.loading-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.content {
display: none;
max-width: 1000px;
margin: 0 auto;
padding: 30px;
background-color: white;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
h2 {
color: #333;
margin-top: 20px;
}
p {
color: #666;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="loading-overlay">
<div class="loading-spinner">
</div>
<div class="loading-text">
Please wait, loading...
</div>
</div>
<div class="content">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1 style="color: green;">
Welcome to GeeksforGeeks
</h1>
<section>
<h2>About Us</h2>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles,
</p>
</section>
<section>
<h2>Services</h2>
<p>The courses provided by GeeksforGeeks are
absolutely free and bring the best quality
content be it video-based or theoretical.
Each course is track-based, has assessments
and practice sessions (to implement your
learning), and is also updated. You can
go through any one of these at your own
pace. Here, the quality and
quantity are the best on their own.
</p>
</section>
<section>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816223732/geeksgforgeeks-logo.jpg"
alt="GeeksforGeeks Logo">
<div>Quality Content and Learning Resources</div>
</section>
<section>
<h2>Contact Us</h2>
<p>
If you have any questions or would like
to collaborate, feel free to get in
touch with us. We're here to assist you.
</p>
</section>
</div>
<script>
$(document).ready(function () {
setTimeout(function () {
// Fade in duration: 1 second
$(".content").fadeIn(1000);
$(".loading-overlay").fadeOut(1000);
// Fade out duration: 1 second
// Display loading overlay for 1 second
}, 1000);
});
</script>
</body>
</html>
Output:
Approach 2: Scale and Opacity Animation
In the second approach, a loading animation is created by combining scale and opacity animations. When the page loads, a loading overlay appears at the center of the screen. Instead of a fading effect, this overlay gradually scales up while its opacity decreases, resulting in a subtle visual impact. At the same time, the main content remains hidden with display: none;
After a predetermined interval, typically two second, the loading overlay smoothly shrinks back to its original size while simultaneously increasing opacity. As the overlay gently fades out, the main content gracefully emerges through a fade-in animation, offering users an engaging and dynamic loading experience.
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Welcome to GFG</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js">
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f7f7f7;
color: #333;
}
nav {
background-color: #333;
color: white;
padding: 10px 0;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: white;
transition: color 0.3s ease-in-out;
font-size: 22px;
}
nav ul li a:hover {
color: #3498db;
}
.loading-overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
/* Initial opacity */
transform: scale(1);
/* Initial scale */
animation: scaleOpacity 1s ease-in-out forwards;
/* Apply animation */
}
@keyframes scaleOpacity {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.8);
opacity: 0;
display: none;
/* Hide overlay after animation */
}
}
.loading-spinner {
border: 9px solid #f3f3f3;
border-top: 6px solid green;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.content {
display: none;
max-width: 1000px;
margin: 0 auto;
padding: 30px;
background-color: white;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
border-radius: 10px;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
h2 {
color: #333;
margin-top: 20px;
}
p {
color: #666;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="loading-overlay">
<div class="loading-spinner"></div>
<div class="loading-text">
Please wait, loading...
</div>
</div>
<div class="content">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1 style="color: green;">
Welcome to GeeksforGeeks!!
</h1>
<section>
<h2>About Us</h2>
<p>
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles
</p>
</section>
<section>
<h2>Services</h2>
<p>
The courses provided by GeeksforGeeks
are absolutely free and bring the
best quality content be it
video-based or theoretical.
Each course is track-based, has
assessments and practice sessions (to
implement your learning), and is
also updated. You can go through any
one of these at your own pace. Here,
the quality and quantity are the best
on their own.
</p>
</section>
<section>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png"
alt="GeeksforGeeks Logo">
<div>Quality Content and Learning Resources</div>
</section>
<section>
<h2>Contact Us</h2>
<p>
If you have any questions or would
like to collaborate, feel free to
get in touch with us. We're here
to assist you.
</p>
</section>
</div>
<script>
$(document).ready(function () {
setTimeout(function () {
$(".content").fadeIn(2000);
}, 2000);
});
</script>
</body>
</html>
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing