Frammento di animazione di caricamento CSS

772 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Frammento di animazione di caricamento CSS

Consigliato

17 July 2025

Pagina di accesso al CoffeeShop con effetto vetro e Tailwind

14 September 2024

Modulo di Accesso Moderno

7 December 2024

Un codice di efficientlogic648

HTML

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #14161D;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

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

}

Consigliato

Pagina di accesso al CoffeeShop con effetto vetro e Tailwind

Modulo di Accesso Moderno

Un codice di efficientlogic648

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS