יצירת חומר התקדמות בר התקדמות בקלות עם Mprogress.js

אין להכחיש כי גוגל עיצוב חומר שינתה באופן קיצוני את האינטרנט. הוא מציע שפת עיצוב משותפת שמעצבי ממשק משתמש יכולים ליישם את כל אתרי האינטרנט והאפליקציות לנייד.

זה מגמה עיצוב החומר הובילה ספריות רבות, כולל המסגרת Materialize פופולרי. ואחד פרויקטים חדשים חומר מגניב מצאתי את זה Mprogress.js.

ספריית JavaScript זו יוצרת בר התקדמות חומר בסגנון באמצעות CSS טהור ו- JavaScript. אין תלות, שום שטויות. פשוט טעינה פשוטה (ו preloading) עם עיצוב חומר נראה כי יהיה להתאים לכל אתר אינטרנט או יישום אינטרנט.

ההתקנה היא די פשוטה רק דורש שני קבצים: CSS ו סקריפט JS מ Mprogress.

אתה יכול הורד את שניהם מן ריפו GitHub או השתמש מנהל החבילה כגון npm או באואר. משם, אתה צריך ליצור אובייקט Mprogress חדש ולספר את זה כדי להפעיל את מטעין.

זה יכול להיעשות עם פשוטו כמשמעו שורה אחת של קודYou

 var mprogress = Mprogress חדש ('התחל'); 

מאפיינים אחרים ניתן להחיל לשנות את תזמון האנימציה, המהירות או צבע התצוגה של סרגל ההתקדמות. תצורה זו גם מאפשרת לך ליצור תבניות מותאמות אישית - - בהתבסס על סגנון ברירת המחדל של עיצוב החומר. מדהים!

תסתכל על דף הדגמה לראות מטעין זה בפעולה. זה לא סרגל טעינה מהפנט, אולם הוא מציע פתרון נחמד ללא צורך לבנות אחד מאפס.

אתה יכול להפעיל שיטות כמו set () ל לקבוע אחוז או inc () ל הגדלת סרגל הטעינה. זה יכול להיות מטופל באופן תכנותי כדי ליצור מטעין HTTP אבל זה דורש עבודה נוספת ב- JavaScript.

היופי של Mprogress.js הוא בפשטותו. זה לא אומר לך איך לבנות נתונים או מה שאתה צריך להיות טוען. זה יכול להיות טוען את הדף, או שזה יכול להיות טיפול להעלות קובץ. או שזה יכול להיות מעקב אחר כמה המשתמש למטה יש גלילה מהחלק העליון של הדף.

יש כל כך הרבה שאתה יכול לעשות עם ספריה זו ועם תלות אפס אתה יכול להשתמש בו עבור כל פרויקט אינטרנט. כדי להתחיל, לבדוק את ריפו MProgress על GitHub שבו אתה יכול גם לגלוש דרך תיעוד.