สร้างแถบความคืบหน้าการออกแบบวัสดุได้อย่างง่ายดายด้วย Mprogress.js

ไม่มีการปฏิเสธว่าเป็นของ Google การออกแบบวัสดุ มีการเปลี่ยนแปลงเว็บอย่างรุนแรง มันมี ภาษาการออกแบบทั่วไป ที่นักออกแบบ UI สามารถใช้กับเว็บไซต์และแอปมือถือทั้งหมด.

แนวโน้มการออกแบบวัสดุนี้นำไปสู่ห้องสมุดหลายแห่งรวมถึงกรอบ Materialize ที่เป็นที่นิยม และหนึ่งในนั้น โครงการวัสดุใหม่ที่เด็ดสุด ที่ฉันพบคือ Mprogress.js.

ไลบรารี JavaScript นี้สร้าง แถบความคืบหน้าสไตล์วัสดุ ใช้ CSS และจาวาสคริปต์อย่างแท้จริง. ไม่มีการพึ่งพา, ไม่มีเรื่องไร้สาระ เพียงโหลดง่าย ๆ (และโหลดล่วงหน้า) ด้วยรูปลักษณ์การออกแบบวัสดุที่จะตรงกับเว็บไซต์หรือแอปพลิเคชันเว็บใด ๆ.

การตั้งค่าค่อนข้างง่ายและ ต้องการเพียงสองไฟล์: CSS และสคริปต์ JS จาก Mprogress.

คุณสามารถ ดาวน์โหลดทั้งคู่ จาก repo GitHub หรือ ใช้โปรแกรมจัดการแพ็คเกจ เช่น npm หรือ Bower จากนั้นคุณต้อง สร้างวัตถุ Mprogress ใหม่ และบอกให้เริ่มต้นตัวโหลด.

สามารถทำได้ด้วยตัวอักษร โค้ดหนึ่งบรรทัด:

 var mprogress = Mprogress ใหม่ ('เริ่ม'); 

คุณสมบัติอื่น ๆ สามารถนำไปใช้เพื่อเปลี่ยนเวลาการเคลื่อนไหวความเร็วหรือสีที่แสดงของแถบความคืบหน้า การกำหนดค่านี้ยังช่วยให้คุณ สร้างเทมเพลตที่กำหนดเอง ขึ้นอยู่กับสไตล์การออกแบบวัสดุเริ่มต้น น่ากลัว!

ลองดูที่ หน้าตัวอย่าง เพื่อดูการทำงานของตัวโหลดนี้ มันไม่ได้เป็นแถบโหลดที่ชวนให้หลงใหล แต่มันมีทางออกที่ดีโดยที่คุณไม่ต้องสร้างมันขึ้นมาใหม่.

คุณสามารถเรียกใช้วิธีการเช่น ตั้งค่า () ไปยัง ตั้งค่าร้อยละ หรือ INC () ไปยัง เพิ่มแถบการโหลด. สามารถจัดการโดยทางโปรแกรมเพื่อสร้างตัวโหลด HTTP แต่ต้องใช้งานเพิ่มเติมใน JavaScript.

ความงามของ Mprogress.js คือ ความเรียบง่าย. ไม่ได้บอกวิธีจัดโครงสร้างข้อมูลหรือสิ่งที่คุณต้องโหลด อาจกำลังโหลดหน้าเว็บหรืออาจจัดการการอัปโหลดไฟล์ หรืออาจเป็นการติดตามว่าผู้ใช้เลื่อนลงจากด้านบนสุดของหน้าเว็บไปเท่าใด.

มีหลายสิ่งที่คุณสามารถทำได้กับห้องสมุดนี้และด้วย ศูนย์พึ่งพา คุณสามารถใช้มันสำหรับโครงการเว็บใด ๆ ในการเริ่มต้นใช้งานลองดู MProgress repo บน GitHub ซึ่งคุณสามารถเรียกดูผ่าน เอกสาร.