CSS Animated Loading Screen with Dots

Open In Editor Publish Your Code

<!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 Animated Loading Screen with Dots

Recommended

CSS Loading Animation Snippet

Animated Download Button

Simple CSS Card Template

HTML

CSS

JS

Recommended

CSS Loading Animation Snippet

Animated Download Button

Simple CSS Card Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS