Écran de chargement animé CSS avec des points

973 codex

Ouvrir dans l'éditeur Publiez votre code

Écran de chargement animé CSS avec des points

Recommandé

21 July 2025

Menu de navigation des boutons radio CSS

8 October 2025

Extrait d'animation de chargement CSS

30 March 2025

Un code par ytr3d3

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