Écran de chargement animé CSS avec des points

694 codex

Ouvrir dans l'éditeur Publiez votre code

Écran de chargement animé CSS avec des points

Recommandé

22 January 2026

Chargeur de jeu HTML5 pour le portage Web de Pizza Tower

9 December 2024

Bouton de survol

2 March 2026

Script d'injection HTML avec récupération CDN

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Loading Screen</title>
    <style>
        /* General Reset and Body Setup */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
        }

/* 1. Loading Screen Container */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(34, 40, 49, 0.95); /* Dark semi-transparent background */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out; /* For smooth fading */
        }

/* 2. Spinner Container (Holds the dots) */
        .spinner-container {
            width: 100px;
            display: flex;
            justify-content: space-between;
        }

/* 3. Dot Styling */
        .dot {
            width: 18px;
            height: 18px;
            background-color: #00adb5; /* Teal color */
            border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out both;
        }

/* 4. Staggered Animation Delays */
        .dot-1 { animation-delay: -0.32s; }
        .dot-2 { animation-delay: -0.16s; }
        .dot-3 { animation-delay: 0s; }

/* 5. Keyframes for Bounce Animation */
        @keyframes bounce {
            0%, 80%, 100% {
                transform: scale(0);
                opacity: 0.5;
            }
            40% {
                transform: scale(1.0);
                opacity: 1;
            }
        }

/* Content Styling (Hidden until loaded) */
        #content {
            padding: 20px;
            text-align: center;
            display: none; /* Initially hidden */
            transition: opacity 1s;
        }
    </style>
</head>
<body>

<div id="loading-screen">
        <div class="spinner-container">
            <div class="dot dot-1"></div>
            <div class="dot dot-2"></div>
            <div class="dot dot-3"></div>
        </div>
    </div>

<div id="content">
        <h1>Content Loaded Successfully!</h1>
        <p>This content was hidden while the loading animation was running.</p>
    </div>

// 1. Start the fade out effect
                loadingScreen.style.opacity = '0';

// 2. Wait for the transition to finish, then set display: none
                loadingScreen.addEventListener('transitionend', function() {
                    loadingScreen.style.display = 'none';
                    content.style.display = 'block';
                    content.style.opacity = '1';
                });

}, 3000);
        });
    </script>
</body>
</html>

CSS