Crea barra di avanzamento del design del materiale facilmente con Mprogress.js

Non si può negare che Google design dei materiali ha cambiato radicalmente il web. Offre a linguaggio di progettazione comune i progettisti dell'interfaccia utente possono applicare a tutti i siti Web e le app mobili.

Questa tendenza al design dei materiali ha portato a molte librerie, incluso il popolare framework Materialise. E uno dei i nuovi progetti di materiale più interessanti Ho trovato è Mprogress.js.

Questa libreria JavaScript genera a barra di avanzamento in stile materiale usando puro CSS e JavaScript. Nessuna dipendenza, no senza senso. Semplice caricamento (e precaricamento) con un aspetto di design dei materiali che si abbina a qualsiasi sito Web o applicazione web.

L'installazione è piuttosto semplice e richiede solo due file: uno script CSS e uno JS di Mprogress.

Puoi scarica entrambi dal repository GitHub o usa un gestore di pacchetti come npm o Bower. Da lì, è necessario crea un nuovo oggetto Mprogress e dillo per avviare il caricatore.

Questo può essere fatto letteralmente una riga di codice:

 var mprogress = new Mprogress ('start'); 

Altre proprietà può essere applicato per modificare i tempi di animazione, la velocità o il colore di visualizzazione della barra di avanzamento. Questa configurazione ti consente anche creare modelli personalizzati basato sullo stile di progettazione materiale predefinito. Eccezionale!

Dai un'occhiata al pagina demo per vedere questo caricatore in azione. Non è una barra di caricamento affascinante, tuttavia offre una soluzione piacevole senza la necessità di crearne uno da zero.

Puoi eseguire metodi come impostato() a impostare una percentuale o inc () a incrementare la barra di caricamento. Può essere gestito a livello di codice per creare un caricatore HTTP, ma ciò richiede un lavoro aggiuntivo in JavaScript.

La bellezza di Mprogress.js è la sua semplicità. Non ti spiega come strutturare i dati o cosa devi caricare. Potrebbe caricare la pagina, oppure potrebbe gestire un caricamento di file. O potrebbe essere il monitoraggio di quanto in basso l'utente ha fatto scorrere dalla parte superiore della pagina.

C'è così tanto che puoi fare con questa libreria e con zero dipendenze puoi usarlo per qualsiasi progetto web. Per iniziare, controlla il Repository MProgress su GitHub in cui è anche possibile sfogliare il documentazione.