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

337 thedashboard1

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

अनुशंसित

6 September 2025

सीएसएस नॉस्टेल्जिया ग्लिच फोटो एनीमेशन

10 July 2025

HTML CSS OTP फॉर्म

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 लोडिंग स्पिनर एनीमेशन

अनुशंसित

सीएसएस नॉस्टेल्जिया ग्लिच फोटो एनीमेशन

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

HTML CSS OTP फॉर्म

HTML

CSS

JS

अनुशंसित

सीएसएस नॉस्टेल्जिया ग्लिच फोटो एनीमेशन

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

HTML CSS OTP फॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS