Animação CSS de carregamento giratório

15 thedashboard1

Abrir no Editor Publique Seu Código

Recomendado

12 September 2025

Controle deslizante de imagem HTML CSS JavaScript

27 April 2025

Um Código de Metehan

20 August 2025

Workshop de Tecnologia: IA, Segurança Cibernética, Blog Web3

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

Controle deslizante de imagem HTML CSS JavaScript

Um Código de Metehan

Workshop de Tecnologia: IA, Segurança Cibernética, Blog Web3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS