How to Create Page Loading Animation Effect using jQuery?
Last Updated :
26 Jul, 2024
Improve
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.
<!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>
200
1
2
<html>3
4
<head>5
<title>Welcome to GeeksforGeeks</title>6
<script src=7
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js ">8
</script>9
10
<style>11
body {12
margin: 0;13
padding: 0;14
font-family: Arial, sans-serif;15
background-color: #f7f7f7;16
color: #333;17
}18
19
nav {20
background-color: #333;21
color: white;22
padding: 10px 0;23
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);24
border-radius: 10px;25
}26
27
nav ul {28
list-style: none;29
margin: 0;30
padding: 0;31
display: flex;32
justify-content: center;33
}34
35
nav ul li {36
margin-right: 20px;37
}38
39
nav ul li:last-child {40
margin-right: 0;41
}42
43
nav ul li a {44
text-decoration: none;45
color: white;46
transition: color 0.3s ease-in-out;47
font-size: 22px;48
}49
50
nav ul li a:hover {51
color: #3498db;52
}53
54
.loading-overlay {55
position: fixed;56
width: 100%;57
height: 100%;58
background-color: rgba(255, 255, 255, 0.8);59
display: flex;60
flex-direction: column;61
justify-content: center;62
align-items: center;63
z-index: 9999;64
}65
66
.loading-text {67
font-size: 18px;68
margin-top: 10px;69
color: #333;70
}71
72
.loading-spinner {73
border: 4px solid #f3f3f3;74
border-top: 4px solid #3498db;75
border-radius: 50%;76
width: 40px;77
height: 40px;78
animation: spin 1s linear infinite;79
}80
81
@keyframes spin {82
0% {83
transform: rotate(0deg);84
}85
86
100% {87
transform: rotate(360deg);88
}89
}90
91
.content {92
display: none;93
max-width: 1000px;94
margin: 0 auto;95
padding: 30px;96
background-color: white;97
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);98
border-radius: 5px;99
}100
101
img {102
max-width: 100%;103
height: auto;104
display: block;105
margin: 20px auto;106
}107
108
h1 {109
color: #333;110
text-align: center;111
margin-bottom: 30px;112
}113
114
h2 {115
color: #333;116
margin-top: 20px;117
}118
119
p {120
color: #666;121
line-height: 1.6;122
}123
</style>124
</head>125
126
<body>127
<div class="loading-overlay">128
<div class="loading-spinner">129
130
</div>131
<div class="loading-text">132
Please wait, loading...133
</div>134
</div>135
<div class="content">136
<nav>137
<ul>138
<li><a href="#">Home</a></li>139
<li><a href="#">About</a></li>140
<li><a href="#">Services</a></li>141
<li><a href="#">Contact</a></li>142
</ul>143
</nav>144
<h1 style="color: green;">145
Welcome to GeeksforGeeks146
</h1>147
<section>148
<h2>About Us</h2>149
<p>150
A Computer Science portal for geeks.151
It contains well written, well thought152
and well explained computer science153
and programming articles,154
</p>155
</section>156
<section>157
<h2>Services</h2>158
<p>The courses provided by GeeksforGeeks are159
absolutely free and bring the best quality160
content be it video-based or theoretical.161
Each course is track-based, has assessments162
and practice sessions (to implement your163
learning), and is also updated. You can164
go through any one of these at your own165
pace. Here, the quality and166
quantity are the best on their own.167
</p>168
</section>169
<section>170
<img src=171
"https://media.geeksforgeeks.org/wp-content/uploads/20230816223732/geeksgforgeeks-logo.jpg"172
alt="GeeksforGeeks Logo">173
<div>Quality Content and Learning Resources</div>174
</section>175
<section>176
<h2>Contact Us</h2>177
<p>178
If you have any questions or would like179
to collaborate, feel free to get in180
touch with us. We're here to assist you.181
</p>182
</section>183
</div>184
185
<script>186
$(document).ready(function () {187
setTimeout(function () {188
189
// Fade in duration: 1 second190
$(".content").fadeIn(1000);191
$(".loading-overlay").fadeOut(1000);192
193
// Fade out duration: 1 second194
// Display loading overlay for 1 second195
}, 1000);196
});197
</script>198
</body>199
200
</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.
<!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>
211
1
2
<html>3
4
<head>5
<title>Welcome to GFG</title>6
<script src=7
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js">8
</script>9
10
<style>11
body {12
margin: 0;13
padding: 0;14
font-family: Arial, sans-serif;15
background-color: #f7f7f7;16
color: #333;17
}18
19
nav {20
background-color: #333;21
color: white;22
padding: 10px 0;23
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);24
border-radius: 10px;25
}26
27
nav ul {28
list-style: none;29
margin: 0;30
padding: 0;31
display: flex;32
justify-content: center;33
}34
35
nav ul li {36
margin-right: 20px;37
}38
39
nav ul li:last-child {40
margin-right: 0;41
}42
43
nav ul li a {44
text-decoration: none;45
color: white;46
transition: color 0.3s ease-in-out;47
font-size: 22px;48
}49
50
nav ul li a:hover {51
color: #3498db;52
}53
54
.loading-overlay {55
position: fixed;56
width: 100%;57
height: 100%;58
background-color: rgba(255, 255, 255, 0.8);59
display: flex;60
flex-direction: column;61
justify-content: center;62
align-items: center;63
z-index: 9999;64
opacity: 1;65
/* Initial opacity */66
transform: scale(1);67
/* Initial scale */68
animation: scaleOpacity 1s ease-in-out forwards;69
/* Apply animation */70
}71
72
@keyframes scaleOpacity {73
0% {74
transform: scale(1);75
opacity: 1;76
}77
78
100% {79
transform: scale(0.8);80
opacity: 0;81
display: none;82
/* Hide overlay after animation */83
}84
}85
86
.loading-spinner {87
border: 9px solid #f3f3f3;88
border-top: 6px solid green;89
border-radius: 50%;90
width: 60px;91
height: 60px;92
animation: spin 1s linear infinite;93
}94
95
@keyframes spin {96
0% {97
transform: rotate(0deg);98
}99
100
100% {101
transform: rotate(360deg);102
}103
}104
105
.content {106
display: none;107
max-width: 1000px;108
margin: 0 auto;109
padding: 30px;110
background-color: white;111
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);112
border-radius: 5px;113
}114
115
img {116
max-width: 100%;117
height: auto;118
display: block;119
margin: 20px auto;120
border-radius: 10px;121
}122
123
h1 {124
color: #333;125
text-align: center;126
margin-bottom: 30px;127
}128
129
h2 {130
color: #333;131
margin-top: 20px;132
}133
134
p {135
color: #666;136
line-height: 1.6;137
}138
</style>139
</head>140
141
<body>142
<div class="loading-overlay">143
<div class="loading-spinner"></div>144
<div class="loading-text">145
Please wait, loading...146
</div>147
</div>148
<div class="content">149
<nav>150
<ul>151
<li><a href="#">Home</a></li>152
<li><a href="#">About</a></li>153
<li><a href="#">Services</a></li>154
<li><a href="#">Contact</a></li>155
</ul>156
</nav>157
<h1 style="color: green;">158
Welcome to GeeksforGeeks!!159
</h1>160
<section>161
<h2>About Us</h2>162
<p>163
A Computer Science portal for geeks.164
It contains well written, well165
thought and well explained computer166
science and programming articles167
</p>168
</section>169
<section>170
<h2>Services</h2>171
<p>172
The courses provided by GeeksforGeeks173
are absolutely free and bring the174
best quality content be it175
video-based or theoretical.176
Each course is track-based, has177
assessments and practice sessions (to178
implement your learning), and is179
also updated. You can go through any180
one of these at your own pace. Here,181
the quality and quantity are the best182
on their own.183
</p>184
</section>185
<section>186
<img src=187
"https://media.geeksforgeeks.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png"188
alt="GeeksforGeeks Logo">189
<div>Quality Content and Learning Resources</div>190
</section>191
<section>192
<h2>Contact Us</h2>193
<p>194
If you have any questions or would195
like to collaborate, feel free to196
get in touch with us. We're here197
to assist you.198
</p>199
</section>200
</div>201
202
<script>203
$(document).ready(function () {204
setTimeout(function () {205
$(".content").fadeIn(2000);206
}, 2000);207
});208
</script>209
</body>210
211
</html>Output:
