Crea barre di avanzamento responsive personalizzate con ProgressBar.js

Le barre di avanzamento sono ampiamente conosciute dalla maggior parte degli utenti sul web. Per gli sviluppatori, è spesso un processo complicato creare una barra di avanzamento da zero . Ma con ProgressBar.js non devi!

Questa libreria open source gratuita non ha dipendenze e supporta tutti i principali browser, tra cui IE9 +.

Per impostazione predefinita, puoi utilizzare una barra semplice, oppure puoi scegliere tra alcune forme di base, come ad esempio:

• Linea singola
• Semicerchio
• Cerchio completo
• Piazza
• Triangolo

Puoi anche progettare forme personalizzate come un cuore, un cloud o anche le scritte del logo del tuo sito web. Certo, ci vorrà un po 'di sforzo ma il risultato finale può essere incredibile.

La libreria funziona su percorsi SVG, quindi se si può costruire una forma delineata usando la marcatura SVG, è possibile animarla con questa libreria della barra di avanzamento.

Le animazioni possono includere anche testo o modelli di avvio / arresto personalizzati . L'API completa ha più dettagli con opzioni / callback che puoi consultare a tuo piacimento.

ProgressBar.js ha anche una piccola guida all'installazione in cui è possibile scaricare e configurare lo script utilizzando Bower, npm o la pagina GitHub semplificata.

E se costruisci qualcosa di interessante, puoi inviare il tuo codice nel repository di GitHub . Il creatore del progetto, Kimmo Brunfeldt, ha un problema GitHub aperto in cui è possibile inviare progetti personalizzati da includere nella libreria.

È possibile aggiungere barre di avanzamento animate alle pagine di registrazione, ai campi di caricamento o a qualsiasi pagina Web come preloader. Le opzioni sono limitate solo dalla quantità di dettagli che sei disposto a ottenere.

Ad esempio, mi piace la demo del misuratore della forza della password, poiché serve a uno scopo reale e avvantaggia l'esperienza dell'utente . Questo esempio viene fornito con il plug-in, quindi puoi copiarlo e modificarlo a tuo piacimento.

Per vedere altri esempi, controlla la homepage di ProgressBar.js o dai uno sguardo a questo violino che mostra l'animazione del cuore.