Animación de carga de CSS Spinner

341 thedashboard1

Abrir en el editor Video Publica tu código

Recomendado

10 January 2026

Plantilla HTML del panel de administración de visitantes

4 December 2024

Animación de botón de pedido

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

Plantilla HTML del panel de administración de visitantes

Un código de mikey

Animación de botón de pedido

HTML

CSS

JS

Recomendado

Plantilla HTML del panel de administración de visitantes

Un código de mikey

Animación de botón de pedido

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS