Crie barra de progresso de projeto de material facilmente com Mprogress.js

Não há como negar que o Google design material mudou radicalmente a web. Ele oferece uma linguagem de design comum que os designers de interface do usuário podem se inscrever em todos os sites e aplicativos para dispositivos móveis.

Esta tendência de design de materiais levou a muitas bibliotecas, incluindo o popular framework Materialize. E um dos melhores projetos de material novo Eu encontrei é Mprogress.js.

Esta biblioteca JavaScript gera um barra de progresso de estilo material usando CSS e JavaScript puros. Sem dependências, sem bobagens Apenas carregamento simples (e pré-carregamento) com uma aparência de design de material que corresponderá a qualquer website ou aplicativo da web.

A configuração é bem simples e requer apenas dois arquivos: um CSS e um script JS do Mprogress.

Você pode baixar os dois do repositório do GitHub ou use um gerenciador de pacotes como npm ou Bower. De lá, você precisa criar um novo objeto Mprogress e diga para iniciar o carregador.

Isso pode ser feito literalmente uma linha de código:

 var mprogress = new Mprogress ('start'); 

Outras propriedades pode ser aplicado para alterar o tempo de animação, a velocidade ou a cor de exibição da barra de progresso. Esta configuração permite até que você criar modelos personalizados com base no estilo de design de material padrão. Impressionante!

Dê uma olhada no página de demonstração para ver este carregador em ação. Não é uma barra de carregamento hipnotizante, no entanto, oferece uma boa solução sem que você precise construir um a partir do zero.

Você pode executar métodos como conjunto() para definir uma porcentagem ou inc () para incrementar a barra de carregamento. Ele pode ser tratado programaticamente para criar um carregador HTTP, mas isso requer trabalho extra em JavaScript.

A beleza do Mprogress.js é sua simplicidade. Não informa como estruturar dados ou o que você precisa carregar. Pode estar carregando a página ou pode estar manipulando um upload de arquivo. Ou pode estar acompanhando o quanto o usuário percorreu a partir do topo da página.

Há tanta coisa que você pode fazer com essa biblioteca e com zero dependências você pode usá-lo para qualquer projeto da web. Para começar, confira o Repo MProgress no GitHub, onde você também pode navegar pelo documentação.