Carregando página HTML com barra de progresso

5764 cvroon

Abrir no Editor Publique Seu Código

Carregando página HTML com barra de progresso

Recomendado

31 July 2025

falha na máquina da realidade

6 September 2025

Modelo HTML de Portfólio do Desenvolvedor

16 October 2025

Tela de carregamento animada em CSS com efeito de código

HTML

CSS

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: white;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.loading-container {
    text-align: center;
    max-width: 400px;
    width: 90%;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.loader {
    margin: 0 auto 30px;
    width: 100px;
    height: 100px;
    position: relative;
}

.spinner {
    width: 100%;
    height: 100%;
    border: 8px solid rgba(255, 255, 255, 0.1);
    border-top: 8px solid #ffffff;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 25px;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.loading-text::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

.progress-container {
    width: 100%;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d);
    border-radius: 10px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(253, 187, 45, 0.5);
}

.percentage {
    font-size: 24px;
    font-weight: 600;
    color: #fdbb2d;
    text-shadow: 0 0 10px rgba(253, 187, 45, 0.7);
}

JS

Recomendado

falha na máquina da realidade

Modelo HTML de Portfólio do Desenvolvedor

Tela de carregamento animada em CSS com efeito de código

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS