อย่างหนึ่งในการทำงานให้มี usebality ที่ขาดไม่ได้อย่างหนึ่งคือ Progress Bars
เพราะว่าการมี Progress Bars ในแอปพลิเคชั่นของเรา หมายถึงการแสดงให้ User เห็นว่าขณะนี้ app กำลังประมวลผลอยู่

การมี Progress bars แทนที่จะเป็น Loading animation หรือคำว่า please wait มันทำให้ผู้ใช้รู้สึกว่า การรอคอยนี้กำลังคืบหน้าไปถึงไหนแล้ว,
ต้องรออีกนานเท่าไหร่, ซึ่งต่างจากทั้งสองอย่างแรกที่ไม่รู้ว่าต้องรออีกนานแค่ไหน,ติดตรงไหนรึปล่า,รึการประมวผลหลุดหรือค้างไปแล้ว.

เราสามารถใช้ progress bars ในงานต่างๆได้เช่น การโหลดหน้าเว็บเพจ,การอัพโหลดไฟล์,หรือการส่งข้อมูลแบบ Ajax
การสร้าง progress bars สามารทำได้หลายวิธีดังนี้

1. ใช้ jQuery progress bars
2. ใช้ JavaScript และ DHTML progress bars
3. สร้าง progress bars โดยใช้ CSS
4. สร้าง progress bars โดยใช้ Photoshop

มาดูกันว่า progress bars ตัวไหนน่าสนใจมั่ง

1.ใช้ jQuery Progress Bars

1.1 jQuery.UI ProgressBar Widget

เป็นการใช้ jQuery UI ทำ Progress Bar เลย

1.2 PHP และ jQuery upload progress bar

เป็นการใช้ PHP ผสมกับ jQuery เหมาะสำหรับการใช้ PHP เชื่อมต่อฐานข้อมูล

1.3 jqUploader

ใช่ก็บอกแล้วว่าเป็นปลั๊กอินของ jQuery แล้วก็เหมาะสำหรับการใช้ upload file เท่านั้น

ภายในปลั๊กอินตัวนี้ เราไม่จำเป็นต้องรู้ขนาดของไฟล์เพื่อที่จะคำนวนหา % ของไฟล์ที่ถูกอัพโหลดไป ปลั๊กอินตัวนี้จะจัดการให้ทุกอย่างเอง

1.4 Progress Bar Plugin

อันนี้เป็นการปลั๊กอินของ jquery อีกตัว

2. ใช้ DHTML และ JavaScript Progress bars

2.1 Popup progress bar

เหมาะสำหรับการแสดงเมื่อต้องการหน่วงหน้า(Delay page) ในการ redirect ไปหน้าอื่น

2.2 WinXP Progress Bar (version 1.2)

เป็น DHTML ทั้งดุ้น โดยเลียนแบบ progress bar ใน windows xp ทุกๆอย่างสามารถปรับแต่งได้หลายแบบและสามารถเรียกใช้ได้หลายๆอันในหน้าเดียว

2.3 Progress graphic on submit

หากต้องการแสดงการเคลื่อนไหวเมื่อกดปุ่ม ตกลง ไปแล้วอันนี้ก็เหมาะ

2.4 scriptable progress bar

อันนี้เป็นการขยาย Elements ของ XHTML ที่สร้างขึ้นมาเอง, วาด Elements โดยใช้ SVG, กำหนดสไตล์ด้วย CSS

2.5 Knitters’ Progress Bars

อันนี้ก็เป็นแค่ HTML/Javascript อีกแบบหนึ่ง

2.6 Animated Progress Bars โดยใช้ MooTools

หากต้องการแถบแสดงสถานะโดยมี % ของงานที่สำเร็จไปแล้วแต่ไม่ได้ใช้ jQuery การใช้ MooTools ก็ดีเหมือนกันนะ

3. สร้าง Progress Bars โดยใช้ CSS

3.1 Pure CSS Animated Progress Bar

อันนี้เป็นตัวอย่างง่ายๆในการแสดงให้เห็นว่าจะสร้าง animated progress bar ได้อย่างไร. เคล็ดลับที่ง่ายๆคือ เราต้องการแค่ 3 Element, 1 Container และ 2 Nested elements

3.2 Creating Progress Bar with CSS

ในฟรีอีเมลเช่น Yahoo Mail หรือ Gmail ใช้แบบนี้ในการเตือนผู้ใช้เมื่อโควต้าได้ถูกใช้ไป, เราสามารถสร้าง progress bar โดยใช้ CSS โค้ดที่ง่ายๆและรูปภาพจำนวนหนึ่งเท่านั้น

3.3 CSS Progress Bar

3.4 CSS Progress Bar

4. สร้าง Progress Bars โดยใช้ Photoshop

4.1 Animated Progress Bar

ในลิงค์ที่สอน,เราจะเห็นวิธีการสร้างภาพรูปเคลื่อนไหวสำหรับนำมาใช้ในเว็บเราได้

4.2 Professionaly looking animated progress bar

ในหลายๆงานเราต้องการภาพเคลื่อไหวดีๆ เพื่อดึงดูดความสนใจของผู้ใช้เอาไว้

4.3 Windows XP Progress Bar

เป็น Progress Bar ที่เลียนแบบมาจาก Windows XP, มันจะทำให้ผู้ใช้คุ้นเลยกับรูปทรงแบบนี้อยู่แล้ว