Creando barras de progreso elegantes y receptivas con ProgressBar.js

() translation by (you can also view the original English article)

Nada en la web sucede al instante. La única diferencia está en el tiempo que lleva completar un proceso. Algunos procesos pueden ocurrir en unos pocos milisegundos, mientras que otros pueden tomar hasta varios segundos o minutos. Por ejemplo, puedes estar editando una imagen muy grande cargada por tus usuarios, y este proceso puede llevar algún tiempo. En tales casos, es una buena idea informar a los visitantes que el sitio web no está atascado en algún lugar porque en realidad está trabajando en tu imagen y está cargando.

Una de las formas más comunes de mostrar a los lectores cuánto ha progresado un proceso es usar barras de progreso. En este tutorial, aprenderás a usar la biblioteca ProgressBar.js para crear diferentes barras de progreso con formas simples y complejas.

Crear una barra de progreso básica

Una vez que hayas incluido la biblioteca en tu proyecto, crear una barra de progreso con esta biblioteca es fácil. ProgressBar.js es compatible con todos los principales navegadores, incluido IE9+, lo que significa que puedes usarlo en cualquier sitio web que estés creando sin ningún problema. Puedes obtener la última versión de la biblioteca desde GitHub o usar directamente un enlace de CDN para agregarla a tu proyecto.

Para evitar cualquier comportamiento inesperado, asegúrate de que el contenedor de la barra de progreso tenga la misma relación de aspecto que la barra de progreso. En el caso de un círculo, la relación de aspecto del contenedor debe ser 1:1 porque el ancho será igual a la altura. En el caso de un semicírculo, la relación de aspecto del contenedor debe ser 2:1 porque el ancho será el doble de la altura. Del mismo modo, en el caso de una línea simple, el contenedor debe tener una relación de aspecto de 100:strokeWidth para la línea.

Al crear barras de progreso con una línea, círculo o semicírculo, simplemente puedes usar el método ProgressBar.Shape() para crear la barra de progreso. En este caso, la forma puede ser un círculo, una línea o un semicírculo. Puedes pasar dos parámetros al método Shape(). El primer parámetro es un selector o nodo del DOM para identificar el contenedor de la barra de progreso. El segundo parámetro es un objeto con pares clave-valor que determinan la apariencia de la barra de progreso.

Puedes especificar el color de la barra de progreso utilizando la propiedad color. Cualquier barra de progreso que crees tendrá un color gris oscuro de forma predeterminada. El grosor de la barra de progreso se puede especificar utilizando la propiedad strokeWidth. Debes tener en cuenta que el ancho aquí no está en píxeles, sino en términos de un porcentaje del tamaño del lienzo. Por ejemplo, si el lienzo tiene 200 píxeles de ancho, el valor de strokeWidth en 5 creará una línea de 10 píxeles de grosor.

Además de la barra de progreso principal, la biblioteca también te permite dibujar una línea final que mostrará a los lectores la ruta en la que se moverá la barra de progreso. El color del rastro de la línea se puede especificar usando la propiedad trailColor, y su ancho se puede especificar usando la propiedad trailWidth. Al igual que strokeWidth, la propiedad trailWidth también calcula el ancho en términos porcentuales.

El tiempo total que tarda la barra de progreso en pasar de su estado inicial a su estado final se puede especificar utilizando la propiedad duration. Por defecto, una barra de progreso completará tu animación en 800 milisegundos.

Puedes usar la propiedad easing para especificar cómo debe moverse una barra de progreso durante la animación. Todas las barras de progreso se moverán con una velocidad linear por defecto. Para que la animación sea más atractiva, puedes establecer este valor en algo más como easeIn, easeOut, easeInOut o bounce.

Después de especificar los valores iniciales de los parámetros, puedes animar las barras de progreso utilizando el método animate(). Este parámetro acepta tres parámetros. El primer parámetro es la cantidad hasta la que deseas animar la línea de progreso. Los otros dos parámetros son opcionales. El segundo parámetro se puede usar para anular cualquier valor de propiedad de la animación que establezcas durante la inicialización. El tercer parámetro es una función de devolución de llamada para hacer otra cosa una vez que finaliza la animación.

En el siguiente ejemplo, he creado tres barras de progreso diferentes usando todas las propiedades que hemos mencionado hasta ahora.

var lineBar = new ProgressBar.Line('#line-container', {
    color: 'orange',
    strokeWidth: 2,
    trailWidth: 0.5
});

lineBar.animate(1, {
    duration: 1000
});

var circleBar = new ProgressBar.Circle('#circle-container', {
    color: 'white',
    strokeWidth: 2,
    trailWidth: 10,
    trailColor: 'black',
    easing: 'easeInOut'
});

circleBar.animate(0.75, {
    duration: 1500
});

var semiBar = new ProgressBar.SemiCircle('#semi-container', {
    color: 'violet',
    strokeWidth: 2,
    trailWidth: 0.5,
    easing: 'bounce'
});

semiBar.animate(1, {
    duration: 3000
});

Animar valores de texto con la barra de progreso

Lo único que cambia con la animación de las barras de progreso en el ejemplo anterior es su longitud. Sin embargo, ProgressBar.js también te permite cambiar otros atributos físicos como el ancho y el color del trazo de la línea. En tales casos, tendrás que especificar los valores iniciales para la barra de progreso dentro del parámetro from y los valores finales dentro del parámetro to al inicializar las barras de progreso.

También puedes indicarle a la biblioteca que cree un elemento de texto que acompañe a la barra de progreso para mostrar información textual a tus usuarios. El texto puede ser cualquier cosa, desde un valor estático a un valor numérico que indica el progreso de la animación. El parámetro text aceptará un objeto como su valor.

Este objeto puede tener un parámetro value para especificar el texto inicial que se mostrará dentro del elemento. También puedes proporcionar un nombre de clase para agregar al elemento de texto utilizando el parámetro className. Si deseas aplicar algunos estilos en línea al elemento de texto, puedes especificarlos todos como un valor del parámetro style. Todos los estilos predeterminados se pueden eliminar estableciendo el valor style en null. Es importante recordar que los valores predeterminados solo se aplican si no has establecido un valor personalizado para ninguna propiedad CSS dentro de style.

El valor dentro del elemento de texto permanecerá igual durante toda la animación si no lo actualizas tú mismo. Afortunadamente, ProgressBar.js también proporciona un parámetro step que se puede usar para definir una función que se llamará en cada paso de la animación. Dado que esta función se llamará varias veces por segundo, debes tener cuidado con su uso y mantener los cálculos en su interior lo más simple posible.

var lineBar = new ProgressBar.Line("#line-container", {
  strokeWidth: 4,
  trailWidth: 0.5,
  from: { color: "#FF9900" },
  to: { color: "#00FF99" },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '-30px',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

lineBar.animate(1, {
  duration: 4000
});

var circleBar = new ProgressBar.Circle("#circle-container", {
  color: "white",
  strokeWidth: 2,
  trailWidth: 25,
  trailColor: "black",
  easing: "easeInOut",
  from: { color: "#FF9900", width: 1 },
  to: { color: "#FF0099", width: 25 },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '45%',
      left: '42%',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

circleBar.animate(0.75, {
  duration: 1500
});

var semiBar = new ProgressBar.SemiCircle("#semi-container", {
  color: "violet",
  strokeWidth: 2,
  trailWidth: 8,
  trailColor: "black",
  easing: "bounce",
  from: { color: "#FF0099", width: 1 },
  to: { color: "#FF9900", width: 2 },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '45%',
      left: '50%',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

semiBar.animate(0.75, {
  duration: 2000
});

Crear barras de progreso con formas personalizadas

A veces, es posible que desees crear barras de progreso con diferentes formas que coincidan con el tema general de tu sitio web. ProgressBar.js te permite crear barras de progreso con formas personalizadas utilizando el método Path(). Este método funciona como Shape() pero proporciona menos parámetros para personalizar la animación de la barra de progreso. Todavía puedes proporcionar un valor para duration y easing en la animación. Si deseas animar el color y el ancho del trazo utilizado para dibujar la ruta personalizada, puedes hacerlo dentro de los parámetros from y to.

La biblioteca no proporciona ninguna forma de dibujar un camino para la ruta personalizada, como lo hiciste para las líneas y círculos simples. Sin embargo, puedes crear el camino tú mismo con bastante facilidad. En el siguiente ejemplo, he creado una barra de progreso triangular usando el método Path().

Antes de escribir el código JavaScript, tendremos que definir nuestra ruta SVG personalizada en HTML. Aquí está el código que usé para crear un triángulo simple:

1	<svg xmlns="https://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="300" height="300" viewBox="0 0 300 300">
2	<path d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="#ddd" stroke-width="1"/>
3	<path id="triangle" d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="blue" stroke-width="5"/>
4	</svg>

Es posible que hayas notado que creé dos elementos de ruta diferentes. El primer camino tiene un color gris claro que actúa como el sendero que vimos con simples barras de progreso en la sección anterior. El segundo camino es el que animamos con nuestro código. Le hemos dado un id que se usa para identificarlo en el código JavaScript a continuación.

var path = new ProgressBar.Path("#triangle", {
  duration: 6000,
  from: {
    color: "#ff0000",
    width: 2
  },
  to: {
    color: "#0099ff",
    width: 10
  },
  strokeWidth: 4,
  easing: "easeInOut",
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
  }
});

path.animate(1);

Notas finales

Como viste en este tutorial, ProgressBar.js te permite crear fácilmente diferentes tipos de barras de progreso con facilidad. También te da la opción de animar diferentes atributos de la barra de progreso como su ancho y color.

No solo eso, sino que también puedes usar esta biblioteca para cambiar el valor de un elemento de texto que lo acompaña para mostrar el progreso en forma de texto. Este tutorial cubre todo lo que necesitas saber para crear barras de progreso simples. Sin embargo, puedes revisar la documentación para obtener más información sobre la biblioteca.

Si hay algo que deseas que aclare en este tutorial, no dudes en hacérmelo saber en los comentarios.