How to Create Page Loading Animation Effect using jQuery ?

Last Updated : 12 Sep, 2023

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>