Animación de carga de CSS Spinner

17 thedashboard1

Abrir en el editor Publica tu código

Recomendado

20 January 2025

Efecto de desplazamiento del botón con CSS

20 October 2024

Botón de degradado 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>

Animación de carga de CSS Spinner

Recomendado

Notificación de brindis

Efecto de desplazamiento del botón con CSS

Botón de degradado CSS

HTML

CSS

JS

Recomendado

Notificación de brindis

Efecto de desplazamiento del botón con CSS

Botón de degradado CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS