Crea barre di avanzamento responsive personalizzate con ProgressBar.js
Barre di avanzamento sono ampiamente conosciuti 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, incluso IE9+.
Di default, puoi usa una barra semplice, o puoi selezionare da alcune forme di base, ad esempio:
- Linea singola
- Semicerchio
- Cerchia completa
- Piazza
- Triangolo
Puoi anche progettare le tue forme personalizzate come un cuore, una nuvola 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 Biblioteca funziona su percorsi SVG, quindi se puoi costruire una forma delineata usando il markup SVG puoi animalo con questa libreria della barra di avanzamento.
Le animazioni possono anche includere il testo o avere modelli di avvio / arresto personalizzati. L'API completa ha maggiori dettagli con opzioni / callback che puoi esaminare a tuo piacimento.
ProgressBar.js ha anche un piccolo guida d'installazione dove puoi scarica e configura lo script usando Bower, npm o la pagina GitHub più semplice.
E se costruisci qualcosa di bello, puoi farlo invia il tuo codice nel repository GitHub. Il creatore del progetto, Kimmo Brunfeldt, ha un aprire il problema GitHub dove puoi inviare disegni personalizzati essere incluso nella biblioteca.
Puoi aggiungi barre di avanzamento animate per registrare pagine, caricare campi o qualsiasi pagina web come preloader. Le opzioni sono limitate solo da quanto dettagliato sei disposto a ricevere.
Ad esempio, mi piace la demo del misuratore della forza della password dal momento che serve a un vero scopo e benefici per l'esperienza dell'utente. Questo esempio arriva confezionato con il plugin, quindi puoi copiarlo e modificarlo a tuo piacimento.
Vedere altri esempi, controlla la homepage di ProgressBar.js o dai uno sguardo a questo violino che mostra l'animazione del cuore.
