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 w3wiki.
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 w3wiki!! </ 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 w3wiki 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.w3wiki.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png" alt = "w3wiki 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:
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
});