CSS Loading Animation Snippet

Open In Editor Publish Your Code

.codigo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #30322F;
    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%;
    width: 100%;
    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%);
    width: 100%;
    height: 50%;
    overflow: hidden;
    background: transparent;
}

.loading-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: circle(50% at 50% 50%);
    background: radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.8)); 
    animation: loading-pulse 1.5s infinite alternate-reverse; /* Animação de pulsos */
}

.loading-bar {
    width: 0%;
    height: 10px;
    background: #F92672;
    position: absolute;
    bottom: 20px;
    left: 0; 
    animation: loading-bar-progress 4s linear infinite; /* Animação de progresso */ 
}

@keyframes loading-pulse {
    0% { opacity: 0.2 }
    100% { opacity: 1 } 
}

@keyframes loading-bar-progress {
    0% { width: 0%;    
    100% { width: 100%; }
}

.codigo {
    /* Exemplo de código CSS para a animação */ 
    
    .selector { color: #F92672; }
    .property { color: #66D9EF; }
    .value-number { color: #AE81FF; }
    .value-string { color: #E6DB74; }
    .value-color { color: #A6E22E; }
    .brace { color: #F8F8F2; }
    .comment { color: #75715E; }

opacity: 0.7; /* Desfoque sutil para dar sensação de código antigo */

}

CSS Loading Animation Snippet

Recommended

Footer Design using HTML and CSS

CSS Dropdown Menu

CSS Animation Container HTML Structure

HTML

CSS

JS

Recommended

Footer Design using HTML and CSS

CSS Dropdown Menu

CSS Animation Container HTML Structure

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS