Webleb - UI Elements - CSS Loading Animation: 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
        */

JS

CSS Loading Animation: Ellipse Loader

Recommended