เครื่องสร้าง CSS Spinner — Animation Loading

Spinners และ loaders แจ้งผู้ใช้ว่าเนื้อหากำลังโหลด CSS spinner ดีกว่า GIF สามารถปรับขนาดได้ ปรับแต่งง่าย และเบากว่า

ประเภท CSS Spinner

• วงล้อหมุน: spinner วงกลมคลาสสิกพร้อม border
• วงกลมเต้น: animation scale หรือ opacity
• สามจุด: วงกลมที่ animated แบบต่อเนื่อง
• Progress bar: ตัวบ่งชี้ความคืบหน้าแบบเส้นตรง
• Skeleton: placeholder รูปร่างเนื้อหา

Best Practices

ใช้ spinners สำหรับการดำเนินการที่ใช้เวลามากกว่า 300 ms สำหรับมากกว่า 1 วินาที แสดง spinner พร้อมคำอธิบาย Skeleton loading ดีกว่าสำหรับ layout ที่ซับซ้อน