CSS लोडिंग एनिमेशन: दीर्घवृत्त लोडर

27 ByBy.inc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

21 August 2025

उलटी गिनती के साथ CSS एनीमेशन कंटेनर

23 August 2025

सीट लियोन लॉगिन पेज HTML CSS टेम्पलेट

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

अनुशंसित

उलटी गिनती के साथ CSS एनीमेशन कंटेनर

सीट लियोन लॉगिन पेज HTML CSS टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS