Δημιουργήστε εύκολα τη γραμμή προόδου του σχεδιασμού υλικού με το Mprogress.js

Δεν υπάρχει καμία άρνηση της Google σχεδιασμό υλικού έχει αλλάξει ριζικά τον ιστό. Προσφέρει ένα κοινή γλώσσα σχεδιασμού ότι οι σχεδιαστές του UI μπορούν να εφαρμόσουν σε όλους τους ιστότοπους και τις εφαρμογές για κινητά.

Αυτή η τάση σχεδιασμού υλικού έχει οδηγήσει σε πολλές βιβλιοθήκες, συμπεριλαμβανομένου του δημοφιλούς πλαισίου υλικών. Και ένα από τα πιο cool έργα νέων υλικών Βρήκα είναι Mprogress.js.

Αυτή η βιβλιοθήκη JavaScript δημιουργεί ένα υλική γραμμή προόδου χρησιμοποιώντας καθαρό CSS και JavaScript. Δεν υπάρχουν εξαρτήσεις, καμία ανοησία. Απλή φόρτωση (και προφόρτιση) με μια ματιά σχεδιασμού υλικού που θα ταιριάζει με οποιοδήποτε ιστότοπο ή εφαρμογή ιστού.

Η ρύθμιση είναι πολύ απλή και απαιτεί μόνο δύο αρχεία: ένα σενάριο CSS και ένα JS από το Mprogress.

Μπορείς κατεβάστε και τα δύο από το GitHub repo ή χρησιμοποιήστε έναν διαχειριστή πακέτων όπως npm ή Bower. Από εκεί, πρέπει να δημιουργήστε ένα νέο αντικείμενο Mprogress και πείτε του να ξεκινήσει τον φορτωτή.

Αυτό μπορεί να γίνει κυριολεκτικά μια γραμμή κώδικα:

 var mprogress = νέο Mprogress ('αρχή'); 

Άλλες ιδιότητες μπορεί να εφαρμοστεί για να αλλάξει το χρονισμό κινούμενων εικόνων, την ταχύτητα ή το χρώμα εμφάνισης της γραμμής προόδου. Αυτή η ρύθμιση σάς επιτρέπει ακόμα δημιουργήστε προσαρμοσμένα πρότυπα με βάση το προεπιλεγμένο στυλ σχεδίου υλικού. Φοβερός!

Ρίξτε μια ματιά στο σελίδα επίδειξης για να δείτε αυτόν τον φορτωτή σε δράση. Δεν είναι μια γοητευτική μπάρα φόρτωσης, ωστόσο προσφέρει μια ωραία λύση χωρίς να χρειάζεται να χτίσετε ένα από το μηδέν.

Μπορείτε να εκτελέσετε μεθόδους όπως σειρά() προς το ορίστε ένα ποσοστό ή inc () προς το αυξήστε τη γραμμή φόρτωσης. Μπορεί να αντιμετωπιστεί προγραμματικά για να δημιουργηθεί ένας φορτωτής HTTP, αλλά αυτό απαιτεί επιπλέον εργασία στο JavaScript.

Η ομορφιά του Mprogress.js είναι την απλότητα του. Δεν σας λέει πώς να δομήσετε δεδομένα ή τι πρέπει να φορτώσετε. Θα μπορούσε να φορτώνει τη σελίδα ή θα μπορούσε να χειριστεί μια μεταφόρτωση αρχείου. Ή θα μπορούσε να παρακολουθεί πόσο μακριά έχει περάσει ο χρήστης από την κορυφή της σελίδας.

Υπάρχουν πολλά που μπορείτε να κάνετε με αυτή τη βιβλιοθήκη και με μηδενικές εξαρτήσεις μπορείτε να το χρησιμοποιήσετε για οποιοδήποτε έργο ιστού. Για να ξεκινήσετε, ελέγξτε το MPGress repo στο GitHub όπου μπορείτε επίσης να περιηγηθείτε στο απόδειξη με έγγραφα.