Extrait d'animation de chargement CSS

33 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 August 2025

Un code par slowlogic992

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

}

Extrait d'animation de chargement CSS

Recommandé

Bouton et calque animés CSS

Carte vélo en CSS pur

Un code par slowlogic992

HTML

CSS

JS

Recommandé

Bouton et calque animés CSS

Carte vélo en CSS pur

Un code par slowlogic992

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS