Exemple d'écran de chargement animé CSS HTML

1,362 webleb

Ouvrir dans l'éditeur Publiez votre code

Exemple d'écran de chargement animé CSS HTML

Recommandé

14 October 2025

Exemple de conteneur d'animation HTML

27 January 2026

PICO-8 HTML Shell : Jouez aux cartouches dans votre navigateur

26 August 2025

Modèle HTML de site Web de film

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>

CSS