Como Criar um Indicador de Rolagem de Página com jQuery e SVG

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Hoje, veremos algumas técnicas que podemos usar para mostrar o progresso da rolagem de páginas que o usuário esteja lendo. Essa técnica tem sido usada por um crescente número de sites e por uma boa razão: ela provê um retorno do tempo a ser investido para consumir uma página em particular. De acordo com que o usuário rola a página, eles são apresentados a um progresso atual em diferentes formatos.

Hoje, mostrarei duas técnicas específicas que podem ser usadas para mostrar essa progressão, dando-lhe a oportunidade de criar o seu próprio indicador usando esse conjunto de ferramentas. Comecemos!

Preparando o Documento

Primeiro, prepararemos um documento que funcionará como nossa página. Nós usaremos o normalize.css e a jQuery, assim como uma fonte lá do Google font. Seu arquivo HTML deve parecer mais ou menos com isso:

<!doctype html>
<html>
<head>
        <title>Animação do Indicador de Progresso</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <!-- Conteúdo qualquer vem aqui -->
        <script src="js/jquery.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

O próximo passo é adicionar o conteúdo falso da nossa página:

<main>
<article>
        <header>
            <h1>
                <div class="container">
                    Como Indicar o Progresso Enquanto Rolamos uma Página?
                </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>
                <!-- adicione algum texto extra a partir daqui, se quiser -->
            </div>
        </div>
    </article>
    <footer>
        <h3 class="read-next"><small>Próximo:</small><br>Como Implementar um Foobar?</h3>
    </footer>
</main>

Isso nos dá conteúdo suficiente para testar o comportamento da rolagem.

Estilização Básica

Usaremos uma estilização básica para fazer nossa página aparentar ser mais atrativa.

@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;
}

Cálculo da Posição da Barra de Rolagem

Para calcular a posição da barra de rolagem, precisamos entender o conceito do que estamos rastreando. Uma vez que o JavaScript só é capaz de rastrear o valor rolado começando do topo da página, precisaremos rastrear a partir do valor 0 (bem no topo, sem qualquer rolagem), até o valor que seja o final da rolagem. O valor final será igual ao tamanho total do documento menos o tamanho da tela em si (uma vez que que o documento será rolado até que o final dele alcance o final da janela).

Usaremos o código JavaScript abaixo para calcular a posição da barra.

(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));
    });

}());

O código acima obtem o valor da altura da janela e do corpo da página, e quando o usuário rolar a página, usaremos esses valores para configurar o valor da variável perc (abreviação para percentage). Também utilizamos Math.min e Math.max para limitar os valores ao intervalo 0-100.

Com o cálculo desse percentual, podemos manipular o indicador de progressão.

Indicador Circular

O primeiro indicador que falaremos será o de círculo em SVG. Utilizaremos as propriedades stroke-dasharray e stroke-dashoffset do SVG para mostrar a progressão. Primeiro, adicionemos o indicador ao 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>

Esse trecho nos mostra dois círculos em SVG, assim como uma div para mostrar o nosso percentual. É preciso adicionar estilos a esses elementos também. Depois disso, explicaremos como esses círculos serão posicionados e animados.

.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;
}

Esses estilos preparam os círculos para a animação. Nosso indicador de progressão sempre deve estar visível, assim, o fixamos com a classe .progress-indicator, usando regras de posicionamento e tamanho. Também centralizaremos a contagem da progressão, tanto vertical quanto horizontalmente, dentro da div.

Os círculos são posicionados no centro usando a propriedade transform, diretamente, nos elementos SVG. Começamos o centro do nosso círculo com a transform. Usamos uma técnica que permite aplicarmos uma rotação a partir do centro de nossos círculos, de modo que possamos começar a animação a partir do topo do círculo (ao invés do lado direito dele). No SVG, transform é aplicado a partir do topo esquerdo de um elemento. É por isso que precisamos centralizar nossos círculos na posição 0, 0 e mover o centro do próprio círculo para o centro da área do SVG, usando translate(50, 50).

Usando `stroke-dasharray` e `stroke-dashoffset`

As propriedades stroke-dasharray e stroke-dashoffset permitem aplicar bordas a um SVG. A stroke-dasharray define as partes visíveis da borda. A stroke-dashoffset move o começo da borda. Esses atributos combinados nos ajudam a criar o processo de animação.

Atualizando `stroke-dasharray` Com Base na Rolagem

Agora, adicionaremos uma função para atualizar a stroke-dasharray baseado na rolagem, usando a progressão percentual apresentada 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) + "%");
    }

}());

O deslocamento que combina com nosso círculo inicia em 126. É importante notar que isso não funciona para todos os círculos, uma vez que 126 é aproximadamente a circunferência de um círculo com 20 de raio. Para calcular o valor de stroke-dashoffset para um dado círculo, multiplique seu raio por 2PI. Em nosso caso, o deslocamento exato seria 20 * 2PI = 125.66370614359172.

Variação Horizontal da Progressão

Em nosso próximo exemplo, faremos uma simples barra horizontal, fixada ao topo da janela. Para conseguir esse efeito, usaremos uma div vazia para indicar a progressão.

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

Nota: Nós adicionamos o sufixo "-2" para permitir a inclusão desse exemplo no mesmo arquivo CSS.

Agora, adicionaremos a estilização desse elemento.

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

finalmente, configuraremos a largura da barra de progresso a partir da barra de rolagem.

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

O nosso JavaScript finalizado e completo deve ficar mais ou menos assim:

(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 + '%'});
    }

}());

Outras Ideias Para Barras de Progressão

Esse artigo foi pensado para mostrar o básico a você, de forma que se inspire e crie suas próprias soluções para indicação de progressão. Outras ideais para barras de progresso podem incluir algo mais descritivo ou termos humanizados, como "quase lá" ou "apenas começando". Algumas implementações (como a da ia.net apresentada anteriormente) usam uma estimativa do tempo de leitura de um artigo. Esse tempo pode ser estimado usando um código parecido com o do trecho abaixo:

1	var wordsPerMin = 300; // baseado nesse artigo: 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);

Assim, você usaria a variável minCount junto a perc para apresentar ao leitor o tempo que falta para terminar de ler o artigo. Eis uma implementação bem básica desse conceito.

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();
    }
}

Um Último Ponto: Telas de Tamanhos Adaptáveis

Para garantir que nosso indicador funciona como devido, devemos garantir que nossos cálculos estão corretos a qualquer momento. Para que isso aconteça, precisamos recalcular as alturas e atualizar o indicador de progresso quando o usuário redimensionar a janela. Eis uma adaptação do JavaScript para tornar isso possível:

(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 + '%'});
	}

}());

Nesse código, temos uma função que configura as variáveis necessárias para calcular a progressão em qualquer tamanho de tela, sendo executada toda vez que a tela é redimensionada. Também ativamos novamente a rolagem na janela para que nossa função updateProgress seja executada.

Chegamos ao Fim!

Tendo dado os fundamentos para os mais variados tipos de indicadores, o que você pode fazer mais? Quais indicadores de progresso você tem visto? E quais indicadores são ruins para usabilidade? Compartilhe suas experiências nos comentários!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!