Creare 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+.
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.
