Animación de carga CSS: Ellipse Loader

978 byby.createsite

Abrir en el editor Publica tu código

Recomendado

15 May 2025

Plantilla de sitio web de comercio electrónico HTML CSS

29 June 2025

Fragmento de código del menú desplegable HTML

24 March 2025

Un código de smartarray391

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