पल्स लोडिंग

1194 byby.createsite

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

16 October 2025

लोडिंग प्रभाव के साथ CSS एनिमेटेड पृष्ठभूमि

16 October 2025

CSS एनिमेटेड पृष्ठभूमि और लोडिंग प्रभाव

16 October 2025

CSS एनिमेटेड लोडिंग एलिमेंट उदाहरण

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>

अनुशंसित

लोडिंग प्रभाव के साथ CSS एनिमेटेड पृष्ठभूमि

CSS एनिमेटेड पृष्ठभूमि और लोडिंग प्रभाव

CSS एनिमेटेड लोडिंग एलिमेंट उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS