carga de pulso

Abrir en el editor Publica tu código

Recomendado

17 April 2025

Forma de idea

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>

carga de pulso

Recomendado

Un código de Metehan

Un código de ytr3d3

Forma de idea

HTML

CSS

JS

Recomendado

Un código de Metehan

Un código de ytr3d3

Forma de idea

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS