Los elementos animados son una gran manera de darle movimiento a tu página web o comunicar un estado. En esta ocasión, te enseñaremos cómo animar una barra de progreso en CSS usando las propiedades de animación de este programa.
¿Qué es una barra de progreso en CSS?
Una barra de progreso CSS o barra de progreso animada css en una página web es una barra que representa que un elemento está cargando. A diferencia de un loader, esta barra tiene un inicio y un final. En la mayoría de casos, una barra de progreso es una barra horizontal que empieza vacía y termina llena con un movimiento horizontal.
Para crear una barra de progreso CSS, primero debemos crear un contenedor. Ya que no hay un elemento que nos diga desde el HTML semántico que este contenedor será una barra de progreso, podemos crear un elemento div. Para simplificar el proceso de animar una barra de progreso en CSS, es bueno darle un atributo de clase a este contenedor. En nuestro caso, le hemos dado el nombre .progress-bar. Dentro podemos crear una etiqueta que diga qué estamos midiendo con esta barra, también usando un elemento div.
Para crear la barra como tal podemos insertar dos elementos div: uno será la barra completa estática (que etiquetaremos como el atributo .progress-bar-space) y el otro será el color que estará animado para llenar la barra (etiquetado como progress-bar-value).
¿Cómo animar una barra de progreso en CSS?
Para animar una barra de progreso en CSS o barra de carga CSS, primero debemos darle estilo a sus elementos. Empecemos por el div .progress-bar-space, que será la barra completa. Inicialmente, le damos una altura mínima con la propiedad height: 20px. También podemos darle un valor a su ancho con la propiedad width:300px. Finalmente, le damos un color usando la propiedad background-color, que normalmente es un gris claro como lightgray. Si quieres que esta barra tenga los bordes redondeados, puedes usar la propiedad border-radius con un valor de 5px.
Aunque esto no nos servirá por ahora, también deberemos definir que la propiedad overflow en la barra de progreso esté programada con la palabra clave hidden. Esto hará que, si existen elementos dentro de ella que sobresalgan de su contenedor, no se vean.
Ahora, podemos seguir con la barra de progreso interior, el color que rellena la barra completa. Para esto utilizaremos el selector de clase progress-bar-value. Como queremos que esta barra tenga las mismas características que la barra completa, primero le damos la misma altura height: 20px.
Sin embargo, queremos que esta barra se diferencie y una manera fácil de hacerlo es cambiar su color. Entonces, podemos definir que la propiedad background-color sea con las palabras clave de color o con su código de color. No es necesario que determinemos la propiedad border-radius para este elemento, pues el elemento padre ha determinado la propiedad overflow:hidden, lo cual hace que la barra que cargue no se salga de la barra completa.
Para animar una barra de progreso en CSS, tenemos que tener en cuenta que lo que queremos hacer es cambiar el porcentaje de ancho que ocupa frente a su elemento padre. En este caso, el elemento padre es la barra completa progress-bar-space de la barra de carga. Esto lo podemos hacer usando un valor en términos de porcentaje para cambiar la propiedad width. Por tanto, para crear nuestra animación, podemos determinar el ancho del elemento original como 100%.
Para crear nuestra animación, primero debemos crear los fotogramas clave con la directiva @keyframes. En nuestro caso, le hemos dado a nuestra animación el nombre progressbar, el cual determinamos al insertarlo después de la directiva. Una vez escrita esa línea de código, podemos insertar los estados del elemento.
Animar una barra de progreso en CSS es muy sencillo, pues solo requiere dos estados. ¿Cómo escribimos esto? Te lo demostramos a continuación:
//barra para animar / barra para alentar
@keyframes progressbar {
0% (width: 0%)
100% (width: 100%)
}
Una vez creada esta animación de la barra de progreso CSS, podemos insertarla en nuestro elemento div progressbar de la barra de carga. Solo debes insertar la propiedad animation: progressbar 1s ease-in-out.
Como te explicamos en nuestro artículo sobre las animaciones en CSS, la propiedad animation nos permite determinar muchas más características de la animación. Sin embargo, estas tres propiedades (duración, nombre y curva de velocidad) son las más importantes para crear una animación básica. Para una barra de progreso, te recomendamos definir la propiedad animation-delay con el valor .3s. Además, si quieres que la barra de carga termine en el último keyframe, puedes insertar la propiedad animation-direction: forwards.
Y ahora, ¿cuál es el siguiente paso?
Ahora que sabes cuáles son los pasos exactos para animar una barra de progreso en CSS, ¡ha llegado el momento de que pongas a prueba este conocimiento creando y diseñando tu propia barra de progreso! En KeepCoding sabemos que una mente como la tuya no se detiene con la creación de un solo elemento.
Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, una formación intensiva donde no solo seguirás aprendiendo sobre los lenguajes de programación para el diseño web, sino que también aprenderás cómo animar distintos elementos para diseñar tu propia página web con una experiencia expandida. Con este bootcamp, en unos pocos meses, serás un experto en desarrollo web. ¿A qué esperas para unirte? ¡No te pierdas esta oportunidad e inscríbete ya!
