Trecho de animação de carregamento CSS

32 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

14 October 2024

Um modelo de página da web para "Anes Development" com uma mensagem de boas-vindas e navegação.

10 July 2025

Exemplo de tela de carregamento animada em HTML com CSS

18 April 2025

Um Código de Metehan

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

}

Recomendado

Um modelo de página da web para "Anes Development" com uma mensagem de boas-vindas e navegação.

Exemplo de tela de carregamento animada em HTML com CSS

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS