Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery

Como Crear una Página con un Indicador de Progreso con jQuery y SVG

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Hoy veremos algunas técnicas que podemos usar para mostrar una barra de desplazamiento para usuarios que están viendo la página. Esta técnica está siendo utilizada en un creciente número de sitios, y por buenas razones, está proporciona un entendimiento contextual de inversión necesaria para consumir una página en particular. Mientras los usuarios se desplazan, a ellos se les presenta una sensación de progreso en diferentes formatos.

Como se aprecia en ia.net

Hoy, abordaremos dos técnicas específicas que usted puede emplear para mostrar la barra de progreso y dejarlo con un conjunto de herramientas para crear las suyas. ¡Empecemos!

Configurando el Documento

Primero, vamos a configurar un boceto de un documento que actuara como nuestra página de publicación. Usaremos normalize.css y jQuery así como también Google gont. Su archivo HTML vacío debería lucir así:

A continuación, vamos a añadir nuestro contenido falso:

Esto nos da suficiente contenido para probar las funciones de nuestro desplazamiento.

Estilizado Básico

Vamos a usar algunos estilos básicos para hacer nuestra publicación un poco más atractiva.

Estimación de la Posición del Desplazamiento

Para calcular la posición de nuestro desplazamiento, necesitamos entender conceptualmente lo que estamos monitoreando. Ya que JavaScript puede monitorear sólo el valor de desplazamiento superior, necesitaremos supervisar nuestro valor de desplazamiento desde 0 (arriba, sin desplazamiento) hasta cualquier valor final de desplazamiento que sea. El valor final de desplazamiento será igual a la longitud total del documento menos la altura de la ventana (porque el documento se desplazará hasta el fondo del documento hasta que alcance el fondo de la ventana).

Usaremos el siguiente código de JavaScript para calcular está posición de desplazamiento.

El código de anterior ajusta la altura de la ventana y la altura del cuerpo y cuando el usuario se desplaza, éste usa esos valores para ajustar una variable perc (abreviatura para porcentaje). Además, vamos a utilizar las clases Math.min y Math.max para limitar los valores hasta el rango 0-100.

Cuando se determina este porcentaje, podemos accionar el indicador de progreso.

Indicador de círculo.

El primer indicador que crearemos es un círculo SVG. Nosotros utilizaremos las propiedades SVG stroke-dasharray y stroke-dashoffset para mostrar el progreso. Primero, vamos a añadir un indicador de progreso al documento.

Este markup [lenguaje de clasificación de HTML5], nos da dos círculos en un SVG, así como también un div contenedor para mostrar nuestro contador de porcentaje. También, necesitamos añadir estilo a estos elementos y entonces explicaremos como éstos círculos están ubicados y como agregarles animación.

Estos estilos los configuramos para la animación de nuestros elementos círculos. Nuestro elemento de progreso siempre debería estar visible, así que configuramos la posición para fijarla con .progress-indicator que es una clase con la posición y el tamaño de las reglas. También configuramos nuestro contador de progreso para que éste centrado tanto verticalmente como horizontalmente dentro de este div.

Los círculos están ubicados en el centro usando las propiedades de transformación en los elementos SVG. Iniciamos el centro de nuestro círculos usando transform. Usamos una técnica aquí que nos permite aplicar una rotación desde el centro de nuestros círculos para empezar la animación arriba del círculo (en vez de empezar al lado derecho del círculo). En SVG, transforms son aplicados desde la parte superior izquierda de un elemento. Es por eso que debemos centrar nuestros círculos an 0,0 y mover el centro del círculo al centro del mismo SVG usando translate(50, 50).

Usando stroke-dasharray y stroke-dashoffset

Las propiedades stroke-dasharray y stroke-dashoffset nos permiten animar el contorno de un SVG. stroke-dasharray define las piezas visibles de un contorno. stroke-dashoffset mueve el inicio del contorno. Estos atributos combinados nos permiten crear un proceso de contorno “keyframing”.

Actualizando stroke-dasharray en el Desplazamiento

Luego, añadiremos una función para actualizar el stroke-dasharray, usando nuestro porcentaje de progreso que mostramos anteriormente.

El desplazamiento que coincide con nuestro círculo ocurre a los 126. Es importante considerar que éste no funcionará para todos los círculos, como mide 126 la circunferencia de un círculo con un radio de 20. Para calcular el stroke-dashoffset para un círculo dado, multiplique el radio por 2PI. En nuestro caso, el desplazamiento exacto sería 20 * 2PI = 125.6637614359172.

Variación del Progreso Horizontal

Para nuestro ejemplo, haremos una barra horizontal sencilla que estará fija en la parte superior de la ventana. Para lograr esto, usaremos un div vacío como indicador de progreso.

Nota: hemos añadido el "-2" para permitirnos incluir este ejemplo en el mismo archivo CSS.

Luego, añadiremos nuestro estilo para este elemento.

Finalmente, ajustaremos la anchura de la barra de progreso.

Todos juntos, nuestro JavaScript final debería lucir así:

Otras ideas para Barras de Progreso

Este artículo fue diseñado para darle las herramientas e inspiración para diseñar la solución de su barra de progreso. Otras ideas para barras de progreso podrían incluir usando más términos descriptivos o humanizados para la indicación en si, tal como "a mitad de camino” o “apenas comenzando”. Algunas aplicaciones (como el ejemplo de ia.net que mostramos anteriormente) usa una estimación de tiempo para la lectura de un artículo. Esto podría ser estimado usando código similar al siguiente:

Entonces usted usaría el minCount en conjunto con al variable perc que estamos actualizando en desplazamiento para mostrar al lector su tiempo restante para leer el artículo. Aquí está una implementación básica de este concepto.

Una Pieza Final: Tamaño de Pantalla Flexible

Para asegurarnos que nuestro indicador de progreso funciona como debería, entonces deberíamos asegurarnos que nuestra matemática está calculando las cosas bien en el momento correcto. Para que eso ocurra, necesitamos asegurarnos que estamos volviendo a calcular las alturas y actualizando el indicador de progreso cuando el usuario cambia el tamaño de la ventana.  Aquí está una adaptación de JavaScript parahacer que hacer que eso pase:

Este código declara una función que ajusta las variables que necesitamos para calcular el progreso en cual tamaño de pantalla dado, y llama a esa función cuando está cambiando de tamaño. Además, reiniciamos el desplazamiento al cambiar el tamaño de la pantalla para que nuestra función updateProgress sea ejecutada.

¡Ha alcanzado el final!

¿Ha establecido la base para cualquier número de variantes?, ¿qué puede proponer usted? ¿Cuál indicador de progreso ha visto que funcione? ¿Qué le parece los indicadores que son malos para la funcionalidad? ¡Comparta sus experiencias con nosotros en los comentarios!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.