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

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.

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í:

<!doctype html>
<html>
    <head>
        <title>Progress Indicator Animation</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <!-- fake post content goes here -->
        <script src="js/jquery.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

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

<main>
    <article>
        <header>
            <h1>
                <div class="container">
                    How Should We Show Progress While Scrolling a Post?
                </div>
            </h1>
        </header>
        <div class="article-content">
                <h2 class="lead-in">
                    <div class="container">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </div>
                </h2>
            <div class="container">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                <!-- add your own additional lorem here -->
            </div>
        </div>
    </article>
    <footer>
        <h3 class="read-next"><small>Read Next:</small><br>How do I Implement a Foobar?</h3>
    </footer>
</main>

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.

@import url(http://fonts.googleapis.com/css?family=Domine:400,700);
body {
    font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Domine", sans-serif;
}

h1 {
    font-size: 3.5em;
}

.lead-in {
    color: #fff;
    font-weight: 400;
    padding: 60px 0;
    background-color: #0082FF;
}

article header {
    border-top: 3px solid #777;
    padding: 80px 0;
}

.article-content {
    font-size: 1em;
    font-weight: 100;
    line-height: 2.4em;
}

p {
    margin: 4em 0;
}

.container {
    width: 700px;
    margin: 0 auto;
}


footer {
    text-align: center;
    background-color: #666;
    color: #fff;
    padding: 40px 0;
    margin-top: 60px;
}

.read-next {
    font-size: 2em;
}

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.

(function(){
    var $w = $(window);
    var wh = $w.height();
    var h = $('body').height();
    var sHeight = h - wh;
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
    });

}());

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.

<div class="progress-indicator">
    <svg>
        <g>
            <circle cx="0" cy="0" r="20" class="animated-circle" transform="translate(50,50) rotate(-90)"  />
        </g>
        <g>
            <circle cx="0" cy="0" r="38" transform="translate(50,50)"  />
        </g>
    </svg>
    <div class="progress-count"></div>
</div>

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.

.progress-indicator {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
}
.progress-count {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100px;
    color: #0082FF;
}

svg {
    position: absolute;
}
circle {
    fill: rgba(255,255,255,0.9);
}

svg .animated-circle {
    fill: transparent;
    stroke-width: 40px;
    stroke: #0A74DA;
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
}

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.

(function(){
    var $w = $(window);
    var $circ = $('.animated-circle');
    var $progCount = $('.progress-count');
    var wh = $w.height();
    var h = $('body').height();
    var sHeight = h - wh;
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        updateProgress(perc);
    });

    function updateProgress(perc){
        var circle_offset = 126 * perc;
        $circ.css({
            "stroke-dashoffset" : 126 - circle_offset
        });
        $progCount.html(Math.round(perc * 100) + "%");
    }

}());

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.

1	<div class="progress-indicator-2"></div>

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

Luego, añadiremos nuestro estilo para este elemento.

.progress-indicator-2 {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background-color: #0A74DA;
}

Finalmente, ajustaremos la anchura de la barra de progreso.

1	var $prog2 = $('.progress-indicator-2');
2	function updateProgress(perc){
3	$prog2.css({width : perc*100 + '%'});
4	}

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

(function(){
    var $w = $(window);
    var $circ = $('.animated-circle');
    var $progCount = $('.progress-count');
    var $prog2 = $('.progress-indicator-2');
    var wh = $w.height();
    var h = $('body').height();
    var sHeight = h - wh;
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        updateProgress(perc);
    });

    function updateProgress(perc){
        var circle_offset = 126 * perc;
        $circ.css({
            "stroke-dashoffset" : 126 - circle_offset
        });
        $progCount.html(Math.round(perc * 100) + "%");

        $prog2.css({width : perc*100 + '%'});
    }

}());

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:

1	var wordsPerMin = 300; // based on this article: http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/
2	var wordsArray = $(".article-content").text().split(" ");
3	var wordCount = wordsArray.length;
4	var minCount = Math.round(wordCount / wordsPerMin);

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.

function updateProgress(perc){
    var minutesCompleted = Math.round(perc * minCount);
    var remaining = minCount - minutesCompleted;
    if (remaining){
        $(".progress-indicator").show().html(remaining + " minutes remaining");
    } else {
        $(".progress-indicator").hide();
    }
}

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:

(function(){
    var $w = $(window);
  var $circ = $('.animated-circle');
	var $progCount = $('.progress-count');
	var $prog2 = $('.progress-indicator-2');

	var wh, h, sHeight;

	function setSizes(){
		wh = $w.height();
		h = $('body').height();
		sHeight = h - wh;
	}

	setSizes();

	$w.on('scroll', function(){
		var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
		updateProgress(perc);
	}).on('resize', function(){
		setSizes();
		$w.trigger('scroll');
	});

	function updateProgress(perc){
		var circle_offset = 126 * perc;
		$circ.css({
			"stroke-dashoffset" : 126 - circle_offset
		});
		$progCount.html(Math.round(perc * 100) + "%");

		$prog2.css({width : perc*100 + '%'});
	}

}());

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!