Webleb - fragmentos de código - Animación de carga 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
        */

Animación de carga CSS: Ellipse Loader

Recomendado

Un código de Mete

Un código de anhtuanle2004thl

Un código de solosimbaa86

HTML

CSS

JS

Recomendado

Un código de Mete

Un código de anhtuanle2004thl

Un código de solosimbaa86

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS