chargement d'impulsions

1070 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

23 September 2025

Extrait d'animation de chargement en chute CSS

10 September 2024

PAGE DE CHARGEMENT DE NETFLIX

11 January 2024

Écran de chargement avec points

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carregamento pulsante</title>
    <style>

/* fundo preto, tudo alinhado no centro, 100vh e 100vw*/
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            background: black;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

/* anel que ficará em volta do circulo com animacao para pulsar */
        .carregamento-pulsante {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: transparent;
            border: 4px solid #3498db;
            box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
            outline: none;
            position: relative;
            animation: animacaoPulsante 0.6s ease-in-out infinite;
        }
        /* usando o after para colocar o circulo dentro, com 50% left e 50% top*/
        .carregamento-pulsante::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            background: #3498db;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 8px #3498db;
        }
        /* animacao para pulsar*/
        @keyframes animacaoPulsante {
            0% {
                transform: scale(0);
                opacity: 0.9;
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }
    </style>
</head>

</body>
</html>

Recommandé

Extrait d'animation de chargement en chute CSS

PAGE DE CHARGEMENT DE NETFLIX

Écran de chargement avec points

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS