Ejemplo para hacer una barra de progreso animada en CSS

En este artículo, aprenderás a crear una barra de progreso animada utilizando solo HTML y CSS. Una barra de progreso es útil en diversas interfaces, como formularios de varios pasos, cargas de archivos, o visualizaciones de progreso de tareas. ¡Vamos a ver cómo hacerlo!

Paso 1: Estructura HTML

Primero, necesitas una estructura HTML sencilla que contenga la barra de progreso. Usaremos un contenedor para la barra y un elemento interno que representará el avance:

html
<div class="progress-container">
    <div class="progress-bar"></div>
</div>

Aquí, progress-container es el contenedor de la barra de progreso y progress-bar es el elemento que se animará para mostrar el avance.

Paso 2: Estilos Básicos en CSS

Con la estructura HTML lista, vamos a añadir los estilos básicos en CSS para darle forma a la barra de progreso. Queremos que el contenedor tenga un fondo gris claro y que la barra de progreso tenga un color más llamativo.

css
.progress-container {
    width: 100%;
    background-color: #e0e0e0; /* Fondo gris claro */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Evita que la barra de progreso sobresalga */
    height: 20px;
}

.progress-bar {
    width: 0%; /* Comienza en 0% */
    height: 100%;
    background-color: #4caf50; /* Color verde para la barra */
    transition: width 0.4s ease; /* Transición suave para la animación */
}

progress-container define el tamaño y estilo del contenedor.
progress-bar tiene el color de fondo de la barra de progreso y una transición para que el cambio de tamaño sea gradual.

Paso 3: Agregar la Animación

Para animar la barra de progreso, usaremos la propiedad width en progress-bar. Vamos a simular el avance utilizando CSS puro con una animación de keyframes.

css
@keyframes progressAnimation {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.progress-bar {
    width: 100%; /* Define el ancho final de la barra de progreso */
    animation: progressAnimation 3s ease-in-out forwards; /* Aplica la animación */
}

En este caso:

progressAnimation es una animación que comienza con width: 0% y llega a width: 100%.
animation en .progress-bar aplica progressAnimation, tarda 3 segundos en completarse y termina con forwards, manteniendo el estado final de la animación.

Código Completo

Aquí está el código completo para una barra de progreso animada en CSS:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barra de Progreso Animada en CSS</title>
    <style>
        .progress-container {
            width: 100%;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            height: 20px;
            margin-top: 20px;
        }

        .progress-bar {
            width: 0;
            height: 100%;
            background-color: #4caf50;
            animation: progressAnimation 3s ease-in-out forwards;
        }

        @keyframes progressAnimation {
            from {
                width: 0%;
            }
            to {
                width: 100%;
            }
        }
    </style>
</head>
<body>

<h2>Ejemplo de Barra de Progreso Animada en CSS</h2>
<div class="progress-container">
    <div class="progress-bar"></div>
</div>

</body>
</html>

Explicación Adicional

Animación en bucle o control manual: Si quieres que la barra avance repetidamente o controlarla dinámicamente, puedes ajustar la animación o el width desde JavaScript.
Duración de la animación: Cambia 3s en la propiedad animation para que la animación dure más o menos tiempo, según tus necesidades.

Buscar este blog

Vía Electrónica