fadeIn and fadeout Transition

Approach 2: Scale and Opacity Animation

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 w3wiki</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 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/20230816223732/geeksgforgeeks-logo.jpg"
                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 () { 
  
                // 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:

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
});

Tags:

#jQuery-Questions #JQuery #Web Technologies

Approach 2: Scale and Opacity Animation

fadeIn and fadeout Transition

HTML

How to Create Page Loading Animation Effect using jQuery ?

Similar Reads

Contact Us