Animación de carga de CSS Spinner

501 thedashboard1

Abrir en el editor Video Publica tu código

Recomendado

16 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

14 October 2024

Una plantilla de página web para "Anes Development" con un mensaje de bienvenida y navegación.

26 August 2025

Capas de animación CSS Fondo de ciudad

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>

Recomendado

Plantilla HTML para reproductor de juegos Flash Ruffle

Una plantilla de página web para "Anes Development" con un mensaje de bienvenida y navegación.

Capas de animación CSS Fondo de ciudad

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS