Animation de chargement CSS

16 thedashboard1

Ouvrir dans l'éditeur Publiez votre code

Recommandé

8 June 2025

Exemple d'animation de bouton HTML

10 February 2024

Animation de bouton au survol

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>

Animation de chargement CSS

Recommandé

Un code par alejandrokundrah

Exemple d'animation de bouton HTML

Animation de bouton au survol

HTML

CSS

JS

Recommandé

Un code par alejandrokundrah

Exemple d'animation de bouton HTML

Animation de bouton au survol

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS