Δημιουργήστε Custom Response Bar Progress με το ProgressBar.js
Γραμμές προόδου είναι ευρέως γνωστά στους περισσότερους χρήστες στο διαδίκτυο. Για τους προγραμματιστές, είναι συχνά μια περίπλοκη διαδικασία δημιουργήστε μια γραμμή προόδου από το μηδέν. Αλλά με ProgressBar.js δεν χρειάζεται να!
Αυτή η ελεύθερη βιβλιοθήκη ανοιχτού κώδικα δεν έχει εξαρτήσεις και υποστηρίζει όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE9+.
Από προεπιλογή, μπορείτε χρησιμοποιήστε μια απλή μπάρα, ή μπορείτε επιλέξτε από μερικά βασικά σχήματα, όπως:
- Ενιαία γραμμή
- Ημικύκλιο
- Ολόκληρος κύκλος
- τετράγωνο
- Τρίγωνο
Μπορείτε επίσης να σχεδιάσετε τα δικά σας προσαρμοσμένα σχήματα όπως μια καρδιά, ένα σύννεφο ή ακόμα και το γράμμα του λογότυπου του ιστότοπού σας. Χορηγηθεί ότι αυτό θα πάρει κάποια προσπάθεια, αλλά το τελικό αποτέλεσμα μπορεί να είναι απίστευτο.
Η βιβλιοθήκη λειτουργεί σε διαδρομές SVG, έτσι αν μπορείτε οικοδομήσουμε ένα σκιαγραφημένο σχήμα χρησιμοποιώντας τη σήμανση SVG μπορείτε ζωντανέψτε το με αυτή τη βιβλιοθήκη προόδου.
Οι κινούμενες εικόνες μπορούν επίσης συμπεριλάβετε κείμενο ή έχουν προσαρμοσμένα μοτίβα εκκίνησης / τερματισμού. Το πλήρες API έχει περισσότερες λεπτομέρειες με επιλογές / επανάκλησεις που μπορείτε να περιηγηθείτε στον ελεύθερο χρόνο σας.
Το ProgressBar.js έχει επίσης ένα μικρό οδηγός εγκατάστασης όπου μπορείς κατεβάστε και ρυθμίστε τη δέσμη ενεργειών χρησιμοποιώντας το Bower, npm ή την πιο απλοποιημένη σελίδα GitHub.
Και αν κατασκευάσετε κάτι δροσερό μπορείτε υποβάλετε τον κωδικό σας στο repo του GitHub. Ο δημιουργός του έργου, ο Kimmo Brunfeldt, έχει ένα ανοίξτε το ζήτημα του GitHub όπου μπορείς υποβάλετε προσαρμοσμένα σχέδια να συμπεριληφθεί στη βιβλιοθήκη.
Μπορείς προσθέστε κινούμενες γραμμές προόδου στις σελίδες εγγραφής, στα πεδία μεταφόρτωσης ή σε οποιαδήποτε ιστοσελίδα ως προφορτωτή. Οι επιλογές περιορίζονται μόνο από πόσο λεπτομερείς είστε πρόθυμοι να πάρετε.
Για παράδειγμα, μου αρέσει το demo μετρητή δύναμης κωδικού πρόσβασης από τότε εξυπηρετεί έναν πραγματικό σκοπό και ωφελεί την εμπειρία του χρήστη. Αυτό το παράδειγμα έρχεται συσκευασμένα με το plugin, έτσι μπορείτε να αντιγράψετε αυτό και να το τροποποιήσετε σύμφωνα με τις προτιμήσεις σας.
Για να δω περισσότερα παραδείγματα, ανατρέξτε στην αρχική σελίδα του ProgressBar.js ή κάντε μια ματιά σε αυτό το βιολί που προβάλλει την καρδιά του animation.
