CSS लोडिंग स्पिनर एनीमेशन

6 thedashboard1

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

अनुशंसित

22 June 2025

सीएसएस त्रिभुज टॉगल एनीमेशन

10 July 2025

CSS एनिमेटेड लोडिंग स्क्रीन HTML उदाहरण

16 October 2025

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

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation de Chargement</title>
    <style>
        /* Styles pour centrer et masquer le contenu avant chargement */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }

/* Le style du spinner (l'élément qui tourne) */
        .loader {
            border: 8px solid #e0e0e0; /* Couleur de la bordure claire (fond) */
            border-top: 8px solid #3498db; /* Couleur de la bordure active (bleue) */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1.5s linear infinite; /* Application de l'animation */
        }

/* Définition de l'animation de rotation */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* Optionnel: Masquer le loader après un certain temps (simulation de chargement) */
        /*
        .content-loaded .loader {
            display: none;
        }
        */
    </style>
</head>
<body>

</body>
</html>

अनुशंसित

सीएसएस त्रिभुज टॉगल एनीमेशन

CSS एनिमेटेड लोडिंग स्क्रीन HTML उदाहरण

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS