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

frying egg loading

3D Login Signup Box HTML CSS Design

Pure CSS One Div House Responsive Animation

HTML

CSS

JS

Recommended

frying egg loading

3D Login Signup Box HTML CSS Design

Pure CSS One Div House Responsive Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS