Webleb - Snippets de Código - Animação de carregamento CSS: Ellipse Loader

HTML

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #141A27;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

.codigo {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #272822;
            color: #F8F8F2;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 18px;
            padding: 20px;
            border-radius: 8px;
            white-space: pre-line;
            text-align: left;
            line-height: 1.6;
            max-height: 50%;
            max-width: 90%;
            width: 100%;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

.selector       { color: #F92672; }
        .property       { color: #66D9EF; }
        .value-number   { color: #AE81FF; }
        .value-string   { color: #E6DB74; }
        .value-color    { color: #A6E22E; }
        .brace          { color: #F8F8F2; }
        .comment        { color: #75715E; }
        .function       { color: #A6E22E; }

.animation-container {
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50%;
            overflow: hidden;
            background: transparent;
        }

.loading-element {
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: radial-gradient(circle at 50% 50%, #272822, rgba(0, 0, 0, 0.3));
            animation: loading-animation 1s linear infinite;
        }

@keyframes loading-animation {
            0%   { filter: blur(0px) }
            25%  { filter: blur(10px) }
            50%  { filter: blur(20px) } 
            75% { filter: blur(10px) }
            100% { filter: blur(0px) }
        }

.loading-ellipse {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyMCAyMCI+CiAgPGNpcmNsZSBjeD0iMTQiIGN5PSI0IiByPSIyIiBmaWxsPSIjRjkyNjcyIi8+Cjwvc3ZnPg==');
			animation: rotate 1s infinite linear;
        }

@keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* Comentário: A animação do loading circle aumenta e diminui o blur em um ciclo. Isso
        gera um efeito flutuante e prenhe, refletido no elemento ellipse */

/* Comentário: A forma ellipse se move em um ciclo.
        Symbolising the anxiety and restlessness. 
        Efeito de movimento constante,  sugerindo um loop infinito de espera
        */

Animação de carregamento CSS: Ellipse Loader

Recomendado

Abertura de rolagem

Botão de pairar

Efeito de carta

HTML

CSS

JS

Recomendado

Abertura de rolagem

Botão de pairar

Efeito de carta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS