डॉट्स के साथ CSS एनिमेटेड लोडिंग स्क्रीन

425 codex

संपादक में खोलें अपना कोड प्रकाशित करें

डॉट्स के साथ CSS एनिमेटेड लोडिंग स्क्रीन

अनुशंसित

10 July 2025

CSS एनिमेटेड बटन होवर प्रभाव

28 September 2025

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

17 July 2025

ग्लास प्रभाव और टेलविंड के साथ कॉफ़ीशॉप लॉगिन पृष्ठ

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 एनिमेटेड बटन होवर प्रभाव

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

ग्लास प्रभाव और टेलविंड के साथ कॉफ़ीशॉप लॉगिन पृष्ठ

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS