Nada na web acontece instantaneamente. A única diferença está no tempo que leva para um processo ser concluído. Alguns processos podem acontecer em alguns milissegundos, enquanto outros podem levar vários segundos ou minutos. Por exemplo, você pode estar editando uma imagem muito grande enviada por seus usuários e esse processo pode levar algum tempo. Nesses casos, é uma boa ideia informar aos visitantes que o site não está preso em algum lugar, mas na verdade está trabalhando em sua imagem e fazendo algum progresso.
Uma das maneiras mais comuns de mostrar aos leitores o quanto um processo progrediu é usar barras de progresso. Neste tutorial, você aprenderá a usar a biblioteca ProgressBar.js para criar diferentes barras de progresso com formas simples e complexas.
Criando uma barra de progresso básica
Depois de incluir a biblioteca em seu projeto, é fácil criar uma barra de progresso usando essa biblioteca. O ProgressBar.js é compatível com todos os principais navegadores, incluindo o IE9+, o que significa que você pode usá-lo em qualquer site que estiver criando com confiança. Você pode obter a versão mais recente da biblioteca no GitHub ou usar diretamente um link CDN para adicioná-la ao seu projeto.
Para evitar qualquer comportamento inesperado, certifique-se de que o contêiner da barra de progresso tenha a mesma proporção da barra de progresso. No caso de um círculo, a proporção do recipiente deve ser 1:1 porque a largura será igual à altura. No caso de um semicírculo, a proporção do recipiente deve ser 2:1 porque a largura será o dobro da altura. Da mesma forma, no caso de uma linha simples, o contêiner deve ter uma proporção de 100:strokeWidth para a linha.
Ao criar barras de progresso com uma linha, círculo ou semicírculo, você pode simplesmente usar o ProgressBar.Shape() método para criar a barra de progresso. Neste caso, o Shape pode ser um Circle, Lineou SemiCircle. Você pode passar dois parâmetros para o Shape() método. O primeiro parâmetro é um seletor ou nó DOM para identificar o contêiner da barra de progresso. O segundo parâmetro é um objeto com pares chave-valor que determinam a aparência da barra de progresso.
Você pode especificar a cor da barra de progresso usando o color propriedade. Qualquer barra de progresso que você criar terá uma cor cinza escuro por padrão. A espessura da barra de progresso pode ser especificada usando o strokeWidth propriedade. Você deve ter em mente que a largura aqui não está em pixels, mas em termos de uma porcentagem do tamanho da tela. Por exemplo, se a tela tiver 200px de largura, um strokeWidth valor de 5 criará uma linha com 10px de espessura.
Além da barra de progresso principal, a biblioteca também permite que você desenhe uma linha final que mostrará aos leitores o caminho no qual a barra de progresso se moverá. A cor da linha de trilha pode ser especificada usando o trailColor propriedade, e sua largura pode ser especificada usando o trailWidth propriedade. Assim como strokeWidtha trailWidth também calcula a largura em termos percentuais.
O tempo total gasto pela barra de progresso para ir do seu estado inicial ao seu estado final pode ser especificado usando o duration propriedade. Por padrão, uma barra de progresso completará sua animação em 800 milissegundos.
Você pode usar o easing propriedade para especificar como uma barra de progresso deve se mover durante a animação. Todas as barras de progresso se moverão com um linear velocidade por padrão. Para tornar a animação mais atraente, você pode definir esse valor para algo como easeIn, easeOut, easeInOutou bounce.
Depois de especificar os valores dos parâmetros iniciais, você pode animar as barras de progresso usando o animate() método. Este parâmetro aceita três parâmetros. O primeiro parâmetro é o valor até o qual você deseja animar a linha de progresso. Os outros dois parâmetros são opcionais. O segundo parâmetro pode ser usado para substituir quaisquer valores de propriedade de animação definidos durante a inicialização. O terceiro parâmetro é uma função de retorno de chamada para fazer outra coisa assim que a animação terminar.
No exemplo a seguir, criei três barras de progresso diferentes usando todas as propriedades que discutimos até agora.
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
});
Animando valores de texto com a barra de progresso
A única coisa que muda com a animação das barras de progresso no exemplo acima é seu comprimento. No entanto, ProgressBar.js também permite que você altere outros atributos físicos, como a largura e a cor da linha de traço. Nesses casos, você terá que especificar os valores iniciais para a barra de progresso dentro do from parâmetro e os valores finais dentro do to parâmetro ao inicializar as barras de progresso.
Você também pode instruir a biblioteca a criar um elemento de texto de acompanhamento com a barra de progresso para mostrar algumas informações textuais para seus usuários. O texto pode ser qualquer coisa, desde um valor estático até um valor numérico que indica o progresso da animação. o text parâmetro aceitará um objeto como seu valor.
Este objeto pode ter um value parâmetro para especificar o texto inicial a ser mostrado dentro do elemento. Você também pode fornecer um nome de classe a ser adicionado ao elemento de texto usando o className parâmetro. Se você deseja aplicar alguns estilos embutidos ao elemento de texto, você pode especificá-los todos como um valor do style parâmetro. Todos os estilos padrão podem ser removidos definindo o valor de style para null. É importante lembrar que os valores padrão só se aplicam se você não tiver definido um valor personalizado para nenhuma propriedade CSS dentro style.
O valor dentro do elemento de texto permanecerá o mesmo durante toda a animação se você não o atualizar. Felizmente, ProgressBar.js também fornece um step parâmetro que pode ser usado para definir uma função a ser chamada com cada etapa de animação. Como essa função será chamada várias vezes a cada segundo, você precisa ter cuidado com seu uso e manter os cálculos dentro dela simples.
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
});
Criando barras de progresso com formas personalizadas
Às vezes, você pode querer criar barras de progresso com diferentes formas que correspondam ao tema geral do seu site. ProgressBar.js permite que você crie barras de progresso com formas personalizadas usando o Path() método. Este método funciona como Shape() mas fornece menos parâmetros para personalizar a animação da barra de progresso. Você ainda pode fornecer um duration e easing valor para a animação. Se você quiser animar a cor e a largura do traço usado para desenhar o caminho personalizado, você pode fazê-lo dentro do from e to parâmetros.
A biblioteca não fornece nenhuma maneira de desenhar uma trilha para o caminho personalizado, como fazia para linhas e círculos simples. No entanto, você pode criar a trilha com bastante facilidade. No exemplo a seguir, criei uma barra de progresso triangular usando o Path() método.
Antes de escrever o código JavaScript, teremos que definir nosso caminho SVG personalizado em HTML. Aqui está o código que usei para criar um triângulo simples:
Você deve ter notado que criei dois elementos de caminho diferentes. O primeiro caminho tem uma cor cinza claro que funciona como a trilha que vimos com barras de progresso simples na seção anterior. O segundo caminho é aquele que animamos com nosso código. Nós demos-lhe um id que é usado para identificá-lo no código JavaScript abaixo.
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);
Usando barras de progresso em páginas da Web
As barras de progresso servem para indicar o progresso de um processo para os usuários. Você pode usá-los para uma variedade de tarefas, como upload de imagens, indicação de força de senha, edição de imagens, processamento de uma tabela grande etc.
Nesta seção, criaremos um formulário simples com um textarea elemento para inserir algum texto. Devemos escrever pelo menos 100 caracteres dentro dele e a barra de progresso gradualmente mudará de vermelho para verde. A marcação ficará mais ou menos assim:
Nada extravagante aqui, apenas um formulário simples e um div que conterá nossa barra de progresso circular.
Vamos começar criando uma instância da nossa barra de progresso circular com o seguinte código:
const circleBar = new ProgressBar.Circle("#circle-container", {
from: {color: "#ff0000"},
to: {color: "#008800"},
strokeWidth: 8,
trailWidth: 1,
trailColor: "#666",
easing: "easeInOut",
step: (state, shape) => {
shape.path.setAttribute("stroke", state.color);
}
});
Nós usamos o from e to parâmetros para especificar que a barra de progresso deve ser originalmente vermelha e, finalmente, ficar verde. Tenha em mente que simplesmente definir os valores para from e to não resultará em nenhuma mudança de cor. A mudança na cor da barra de progresso é realizada com o uso de step parâmetro onde definimos o valor de stroke atributo.
Agora, vamos escrever algum código para anexar um keydown ouvinte de eventos do textarea elemento. Obteremos o comprimento do conteúdo do texto dentro do elemento e o dividiremos pelo comprimento mínimo que queremos que o conteúdo do texto tenha. No nosso caso, queremos apenas contar até 100 caracteres. Então, dividimos por 100.
Por fim, utilizamos o animate() método e passar o valor de progress a ele junto com a duração da animação.
const textArea = document.querySelector('form textarea');
textArea.addEventListener('keydown', (event) => {
let content = event.target.value;
const min_length = 100;
let progress = content.length/min_length;
if(progress > 1) {
progress = 1;
}
circleBar.animate(progress, {
duration: 50
});
});
Isso completa nossa integração da barra de progresso com o textarea elemento. Você pode brincar com o código dentro da seguinte demonstração:
Para praticar, você deve considerar a integração de uma barra de progresso com um verificador de senha simples.
Pensamentos finais
Como você viu neste tutorial, ProgressBar.js permite criar facilmente diferentes tipos de barras de progresso com facilidade. Também oferece a opção de animar diferentes atributos da barra de progresso, como largura e cor.
Além disso, você também pode usar esta biblioteca para alterar o valor de um elemento de texto que o acompanha para mostrar o progresso em forma textual. Este tutorial cobre tudo o que você precisa saber para criar barras de progresso simples. No entanto, você pode consultar a documentação para saber mais sobre a biblioteca.
Se houver algo que você gostaria que eu esclarecesse neste tutorial, sinta-se à vontade para me informar nos comentários.
Miniatura de postagem criada com OpenAI DALL-E.
