สร้างแถบความคืบหน้าตอบสนองที่กำหนดเองด้วย ProgressBar.js
แถบความคืบหน้า เป็นที่รู้จักอย่างกว้างขวางโดยผู้ใช้ส่วนใหญ่บนเว็บ สำหรับนักพัฒนามักเป็นกระบวนการที่ซับซ้อน สร้างแถบความคืบหน้าตั้งแต่เริ่มต้น. แต่ด้วย ProgressBar.js คุณไม่จำเป็นต้อง!
ไลบรารีโอเพนซอร์สฟรี ไม่มีการพึ่งพา และ รองรับเบราว์เซอร์ที่สำคัญทั้งหมด, รวมถึง IE9+.
โดยค่าเริ่มต้นคุณสามารถ ใช้แถบง่าย, หรือคุณสามารถ เลือกจากรูปร่างพื้นฐานไม่กี่แบบ, เช่น:
- แถวเดียว
- ครึ่งวงกลม
- ครบวงจร
- สี่เหลี่ยม
- สามเหลี่ยม
คุณยังสามารถออกแบบ รูปร่างที่กำหนดเองของคุณเอง เช่นหัวใจเมฆหรือแม้แต่ตัวอักษรของโลโก้เว็บไซต์ของคุณ ที่ได้รับนี้จะใช้ความพยายาม แต่ผลลัพธ์ที่ได้อาจไม่น่าเชื่อ.
ห้องสมุด ทำงานบนเส้นทาง SVG, ดังนั้นถ้าคุณสามารถ สร้างรูปร่างที่ระบุไว้ การใช้มาร์กอัป SVG คุณทำได้ ทำให้มันเคลื่อนไหว กับไลบรารีแถบความคืบหน้านี้.
ภาพเคลื่อนไหวยังสามารถ รวมถึงข้อความ หรือ มีรูปแบบเริ่ม / หยุดที่กำหนดเอง. API แบบเต็มมี รายละเอียดเพิ่มเติมพร้อมตัวเลือก / การโทรกลับ ที่คุณสามารถอ่านได้ในยามว่าง.
ProgressBar.js ยังมีขนาดเล็ก คู่มือการติดตั้ง ที่ที่คุณสามารถ ดาวน์โหลดและตั้งค่าสคริปต์ ใช้ Bower, npm หรือหน้า GitHub ที่ง่ายขึ้น.
และถ้าคุณสร้างอะไรเจ๋ง ๆ คุณก็ทำได้ ส่งรหัสของคุณไปยัง repo GitHub. Kimmo Brunfeldt ผู้สร้างโครงการมี เปิดปัญหา GitHub ที่ที่คุณสามารถ ส่งการออกแบบที่กำหนดเอง ที่จะรวมอยู่ในห้องสมุด.
คุณสามารถ เพิ่มแถบความคืบหน้าแบบเคลื่อนไหว เพื่อลงทะเบียนเพจอัปโหลดฟิลด์หรือไปยังหน้าเว็บใด ๆ ในฐานะตัวโหลดล่วงหน้า ตัวเลือกจะถูก จำกัด โดย มีรายละเอียดมากแค่ไหน คุณยินดีที่จะรับ.
ตัวอย่างเช่นฉันชอบเดโมเครื่องวัดความแรงของรหัสผ่านตั้งแต่นั้นมา ให้บริการวัตถุประสงค์ที่แท้จริง และ ประโยชน์ประสบการณ์ผู้ใช้. ตัวอย่างนี้มา บรรจุด้วยปลั๊กอิน, เพื่อให้คุณสามารถคัดลอกและแก้ไขได้ตามที่คุณต้องการ.
เพื่อที่จะได้เห็น ตัวอย่างเพิ่มเติม, ตรวจสอบหน้าแรกของ ProgressBar.js หรือลองดูที่ซอตัวนี้แสดงภาพเคลื่อนไหวของหัวใจ.
