Come creare una progress bar responsiva e personalizzata

progress barCreare una progress bar da zero comporta una serie di difficoltà.  Grazie a ProgressBar.js, però, gli sviluppatori web ora hanno vita più facile.

In questo articolo illustreremo come utilizzare questa libreria supportata da tutti i browser, incluso IE9+.

 

 

 

progress bar

La libraria utilizza di default una progress bar semplice.  E’ però possibile selezionare altre tipologie come, ad esempio:

  • Linea singola
  • Semicerchio
  • Cerchio intero
  • Quadrato
  • Triangolo

E’ inoltre possibile disegnare una progress bar completamente personalizzata; un cuore, una nuvola o anche il tuo logo aziendale.  Un processo che forse richiede più tempo, ma sicuramente più efficace in termini di stile e personalizzazione del sito.

La libreria utilizza path SVG.  Le animazioni possono riguardare anche solo testi oppure avere un pattern del tutto personalizzato.  L’API è caratterizzata da diverse opzioni che suggeriamo di analizzare e testare.

 

Il sito di riferimento contiene una guida all’installazione dove è possibile scaricare ed installare lo script utilizzando Bower, npm o il più semplice GitHub.

L’ideatore di questa libreria, Kimmo Brunfeld, consente la pubblicazione dei lavori realizzati dai fruitori di questo script e l’inserimento dei vari disegni all’interno della libreria.

 

Una progress bar che apprezziamo e che suggeriamo è quella indicativa della robustezza delle password che oltre ad essere stilisticamente accattivante è anche molto utile.

Per visualizzarne altre accedi alla pagina principale di ProgressBar.js oppure dai un’occhiata al fiddle dimostrativo.

 

Condividi

You may also like