Crie barras de progresso responsivas personalizadas com ProgressBar.js
Barras de progresso são amplamente conhecidos pela maioria dos usuários na web. Para os desenvolvedores, geralmente é um processo complicado criar uma barra de progresso a partir do zero. Mas com ProgressBar.js você não precisa!
Esta biblioteca de código aberto não tem dependências e suporta todos os principais navegadores, incluindo o IE9+.
Por padrão, você pode use uma barra simples, ou você pode selecione entre algumas formas básicas, tal como:
- Única linha
- Semicírculo
- Círculo completo
- Quadrado
- Triângulo
Você também pode projetar suas próprias formas personalizadas como um coração, uma nuvem ou até mesmo as letras do logotipo do seu site. Concedido isso vai levar algum esforço, mas o resultado final pode ser incrível.
A biblioteca funciona em caminhos SVG, então se você puder construir uma forma delineada usando marcação SVG você pode animá-lo com esta biblioteca de barra de progresso.
Animações também podem incluir texto ou tem padrões personalizados de início / parada. A API completa tem mais detalhes com opções / callbacks que você pode ler em seu lazer.
ProgressBar.js também tem um pequeno Guia de instalação onde você pode baixar e configurar o script usando o Bower, npm ou a página do GitHub, mais simplificada.
E se você construir alguma coisa legal, você pode envie seu código para o repositório do GitHub. O criador do projeto, Kimmo Brunfeldt, tem um questão aberta do GitHub onde você pode enviar desenhos personalizados para ser incluído na biblioteca.
Você pode adicionar barras de progresso animadas para cadastrar páginas, fazer o upload de campos ou para qualquer página da web como um pré-carregador. As opções são limitadas apenas por quão detalhado você está disposto a receber.
Por exemplo, eu gosto da demonstração do medidor de força da senha serve um propósito real e beneficia a experiência do usuário. Este exemplo vem empacotado com o plugin, então você pode copiar isso e modificá-lo ao seu gosto.
Ver mais exemplos, confira a homepage do ProgressBar.js ou dê uma olhada nesse violino demonstrando a animação do coração.
