เครื่องมือสร้าง CSS Loader

โค้ด CSS ที่สร้างขึ้นทำงานอย่างไร

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

สปินเนอร์คือวงกลมที่วาดด้วยขอบหนา กฎ border-top-color จะทาสีเฉพาะส่วนบนของวงแหวนด้วยสีเน้น ทำให้วงแหวนดูเหมือนส่วนโค้ง และกฎ @keyframes spin จะหมุนมันรอบจุดศูนย์กลาง การหมุนด้วย transform: rotate() ช่วยให้แอนิเมชันไม่หนัก เพราะเบราว์เซอร์ย้ายองค์ประกอบบนคอมโพสิเตอร์แทนที่จะวาดใหม่ทุกเฟรม

เมื่อต้องการแสดงบนหน้าเว็บ ให้เพิ่มองค์ประกอบหนึ่งตัวและโหลด CSS:

<div class="loader" role="status" aria-label="กำลังโหลด"></div>

ทำให้เข้าถึงได้

• เพิ่ม role="status" เพื่อให้โปรแกรมอ่านหน้าจออ่านออกเสียงสปินเนอร์
• ตั้ง aria-label ด้วยข้อความสถานะ เช่น “กำลังโหลด”
• อย่าซ่อนเนื้อหาไว้หลังสปินเนอร์นานเกินไม่กี่วินาที โดยไม่มีกลไกสำรองเมื่อหมดเวลา
• เคารพ prefers-reduced-motion สำหรับผู้ใช้ที่เลือกลดการเคลื่อนไหว ให้แทนการหมุนด้วยการค่อยๆ จางง่ายๆ หรือข้อความคงที่ว่า “กำลังโหลด…”

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

ใช้สปินเนอร์เมื่อไร และใช้ UI แบบมองโลกในแง่ดีเมื่อไร

• ตอบสนองต่ำกว่า 100 มิลลิวินาที: ไม่ต้องใช้สปินเนอร์ ตาคนแทบไม่รับรู้ความล่าช้า
• 100 มิลลิวินาที – 1 วินาที: สปินเนอร์แบบบางเบา (วงกลมเล็ก, ข้อความปุ่มว่า “กำลังโหลด…”) ช่วยกันการคลิกซ้ำ
• 1 วินาที – 10 วินาที: ใช้สปินเนอร์ที่เห็นชัด และหากวัดผลได้ก็ควรแสดงความคืบหน้าด้วย
• > 10 วินาที: นี่ไม่ใช่ปัญหาของสปินเนอร์ ให้ไปหาว่าอะไรช้าแล้วแก้ให้ถูกจุด

สำหรับการส่งฟอร์มและการคลิกปุ่ม สปินเนอร์ที่อยู่ในตัวปุ่มมักจะดีกว่าการใช้เลเยอร์ครอบทั้งหน้า