pulse loading

Open In Editor Video Publish Your Code

/* 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>

pulse loading

Recommended

CSS Loading Animation Snippet

Animated Loading Page

Animated Loading Screen CSS

HTML

CSS

JS

Recommended

CSS Loading Animation Snippet

Animated Loading Page

Animated Loading Screen CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS