Exemple d'écran de chargement animé CSS HTML

1160 webleb

Ouvrir dans l'éditeur Video Publiez votre code

Exemple d'écran de chargement animé CSS HTML

Recommandé

30 September 2025

Animation de chargement CSS avec vagues et ondulations

22 June 2025

Modèle de blog Tailwind CSS : mode sombre, réactif

20 February 2026

Chargeur de cubes d'images 3D

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>

Recommandé

Animation de chargement CSS avec vagues et ondulations

Modèle de blog Tailwind CSS : mode sombre, réactif

Chargeur de cubes d'images 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS