Webleb - fragmentos de código - Cargando página HTML con barra de progreso

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

Cargando página HTML con barra de progreso

Recomendado

Un código de cleancloud199

Botón de borrar animado

Una página de inicio matricial creada con índices.

HTML

CSS

JS

Recomendado

Un código de cleancloud199

Botón de borrar animado

Una página de inicio matricial creada con índices.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS