Estructura HTML de la barra de progreso animada CSS

918 byby.createsite

Abrir en el editor Video Publica tu código

Estructura HTML de la barra de progreso animada CSS

Recomendado

13 March 2025

Zara Larsson

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;

}

Estructura HTML de la barra de progreso animada CSS

Recomendado

Un código de lebdev

Botón de animación mágica

Zara Larsson

HTML

CSS

JS

Recomendado

Un código de lebdev

Botón de animación mágica

Zara Larsson

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS