Exemplo de tela de carregamento animada em HTML com CSS

64 webleb

Abrir no Editor Publique Seu Código Precisa de um site?

Exemplo de tela de carregamento animada em HTML com CSS

Recomendado

26 June 2025

Site de comércio eletrônico HTML, Tailwind CSS, compras

21 May 2025

Lâmpada animada

5 May 2025

Calculadora de Impostos Robux HTML CSS

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>

Recomendado

Site de comércio eletrônico HTML, Tailwind CSS, compras

Lâmpada animada

Calculadora de Impostos Robux HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS