Estructura HTML de la barra de progreso animada CSS

675 byby.createsite

Abrir en el editor Publica tu código

Estructura HTML de la barra de progreso animada CSS

Recomendado

13 May 2025

Página de inicio de sesión de Roblox HTML CSS

13 June 2025

Un código de Metehan

9 July 2025

Selector de temas de IU: opciones claras, oscuras y atenuadas

HTML

CSS

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

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

.codigo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #272822;
    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;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.bar {
    width: 100%;
    background-color: #546E7A;
    height: 3px;
    border-radius: 5px;
    position: relative;
}

.progress {
    height: 4px;
    background-color: #F8F8F2;
    width: 99%;
    left: 1px;
    position: absolute;
    top: 100%;
    border-radius: 5px;
    animation: sat_loading 1.2s linear infinite;

}

@keyframes sat_loading {
    0% {
       
        width: 0%; 
    }
    99% {
        width: 99%;
    }
    100% {
       width: 0%; 
    }
}

.figure {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: sat_hop 2s infinite alternate;

}

Recomendado

Página de inicio de sesión de Roblox HTML CSS

Un código de Metehan

Selector de temas de IU: opciones claras, oscuras y atenuadas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS