CSS एनिमेटेड लोडिंग स्क्रीन HTML उदाहरण

1011 webleb

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

18 December 2025

फ्राइडे नाइट फंकइन मैडनेस मॉड HTML5 गेम

23 August 2025

लॉगिन और पंजीकरण फ़ॉर्म HTML/CSS/JS टेम्पलेट

5 June 2024

निःशुल्क सरल HTML लॉगिन फ़ॉर्म

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animated Loading Screen</title>
    <style>
        /* Basic Body Styling */
        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden; /* Prevent horizontal scroll */
        }

/* Loading Screen Styles */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff; /* Clean white background */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Ensure it's on top of everything */
            opacity: 1;
            transition: opacity 0.7s ease-out, visibility 0.7s ease-out; /* Smooth fade out transition */
            visibility: visible; /* Initially visible */
        }

#loading-screen.fade-out {
            opacity: 0;
            visibility: hidden; /* Hide the element after fade */
            pointer-events: none; /* Prevent interaction with the invisible element */
        }

/* Spinner Animation */
        .spinner {
            border: 6px solid rgba(0, 0, 0, 0.1); /* Light grey border */
            border-top: 6px solid #4CAF50; /* Green top border for color */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1.2s linear infinite; /* Spin animation */
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* Content Area Styles */
        .content {
            padding: 40px 20px;
            text-align: center;
            opacity: 0; /* Initially hidden */
            transform: translateY(20px); /* Slightly move down for a subtle entrance */
            transition: opacity 1s ease-in, transform 1s ease-in; /* Fade in and slide up transition */
        }

.content.show {
            opacity: 1;
            transform: translateY(0);
        }

.content h1 {
            color: #34495e;
            margin-bottom: 15px;
        }

.content p {
            line-height: 1.6;
            max-width: 700px;
            margin: 0 auto 30px;
        }

.content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>

<div id="loading-screen">
        <div class="spinner"></div>
    </div>

<div class="content">
        <h1>Welcome to Your HTML Editor!</h1>
        <p>This is where your amazing web content will appear. The loading screen provides a smooth and professional transition for your users, enhancing the perceived performance of your application.</p>
        <p>You can customize the spinner, background, and animation to match your brand's aesthetics.</p>
        <img src="https://via.placeholder.com/800x400/5cb85c/ffffff?text=Your+Editor+Interface+Here" alt="Placeholder for Editor Interface">
    </div>

// Simulate a network/resource loading delay.
            // In a real application, you might hide the loader
            // after actual data fetching or resource loading is complete.
            setTimeout(() => {
                // Add the 'fade-out' class to trigger the CSS transition
                loadingScreen.classList.add('fade-out');

// After the loading screen starts fading, reveal the content
                // A slight delay here ensures the loading screen starts fading
                // before the content becomes fully visible.
                setTimeout(() => {
                    mainContent.classList.add('show');
                }, 300); // Adjust this delay to synchronize with loading screen fade-out

// Optional: Remove the loading screen from the DOM
                // once its transition is fully complete to clean up the DOM.
                loadingScreen.addEventListener('transitionend', () => {
                    if (loadingScreen.classList.contains('fade-out')) {
                        loadingScreen.remove();
                    }
                }, { once: true }); // The listener will only fire once
            }, 1800); // Adjust this time to simulate longer/shorter loading times
        });
    </script>

</body>
</html>

अनुशंसित

फ्राइडे नाइट फंकइन मैडनेस मॉड HTML5 गेम

लॉगिन और पंजीकरण फ़ॉर्म HTML/CSS/JS टेम्पलेट

निःशुल्क सरल HTML लॉगिन फ़ॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS