How to Create Page Loading Animation Effect using jQuery?
Last Updated :
26 Jul, 2024
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 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.
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
How to Create Circle Loading Animation Effect using CSS ?
In this article, we will see how to create a circle-loading animation using HTML and CSS, along with understanding its basic implementation through the example. Generally, Loading Animation is utilized to wait for the content to be fully loaded on the webpage. If some pages don't contain the loader,
6 min read
How to Create Jumping Text 3D Animation Effect using CSS ?
In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. [GFGTABS] html <!DOCTYPE html>
4 min read
How to create Shooting Star Animation Effect using CSS ?
The Shooting Star effect is one of the coolest background effects that is used for dark-themed websites. Shooting Stars Animation is an extraordinary illustration of a loading screen that grabs your eye for a considerable length of time for the remainder of the content to load on the website. This e
4 min read
How to Create Text Animation Effect using JavaScript ?
Creating text animations in JavaScript can add an extra layer of interactivity and engagement to a website or application. By using JavaScript, we can create text that moves, fades, changes color, or transforms in other ways. Animating text can also help convey important information or messages in a
2 min read
How to Create Animation Loading Bar using CSS ?
Loading Bar with animation can be created using HTML and CSS. We will create a Loader that is the part of an operating system that is responsible for loading programs and libraries. The progress bar is a graphical control element used to visualize the progression of an extended computer operation, s
3 min read
How to Create Loading Blur Text Animation Effect using HTML and CSS?
The blur text animation is known as the Smoky effect and is used to give the text a blurry animation. The text blurs linearly in one direction and then reappears. In this article, we will create a loading blur text animation effect using HTML and CSS. Approach: The approach to create loading blur te
3 min read
How to create Incoming Call Animation Effect using CSS ?
In this article, we will learn how to create an incoming call animation effect, by using CSS. Approach: To create this effect, we essentially need to animate the shadow effects around the element frame, which can be easily manipulated using the CSS box-shadow property. It is described by X and Y off
2 min read
Loading Text Animation Effect using CSS
There are a lot of animations possible in CSS and today we will look at the loading text animation. The basic idea behind the working of this animation is the application of animation delay. Every alphabet is delayed by .1s so that each alphabet animates with a little delay and give the loading anim
3 min read
How to create Animated Loading Button using CSS ?
An animated loading button provides a visual cue during processing, often featuring a spinner or pulsing effect. To create one using CSS, style a button element, include a spinner inside, and use CSS animations (like keyframes) to animate the spinner on button activation. Table of Content Using Font
3 min read
How to create animations using relative value in jQuery ?
Using jQuery's animate() method, we can add different CSS animations to the elements. This is one of the powerful methods used for manipulating HTML elements and adding animation functionality in jQuery. The animation effect is created as we change the CSS styles in the animate() method. To change t
2 min read