ตัวสร้าง Loader CSS
CSS Loader Generator สร้างแอนิเมชันโหลดด้วย CSS ล้วนใน 6 สไตล์ ได้แก่ spinner, bouncing dots, ring, pulse, bars และ dual ring ปรับขนาด สี ความเร็ว และความหนาได้ และให้ทั้งโค้ด CSS และ HTML
เกี่ยวกับเครื่องมือนี้
CSS Loader Generator สร้างแอนิเมชันโหลดด้วย CSS ล้วนใน 6 สไตล์ ได้แก่ spinner, bouncing dots, ring, pulse, bars และ dual ring ปรับขนาด สี ความเร็ว และความหนาได้ และให้ทั้งโค้ด CSS และ HTML
วิธีใช้
- เลือกสไตล์ของ loader
- ปรับขนาด สี ความเร็ว และความหนา
- ตรวจดูพรีวิวแบบเรียลไทม์
- คลิก Copy CSS + HTML แล้ววางทั้งสองส่วนลงในหน้าเว็บของคุณ
ข้อควรรู้
- loader แบบ CSS ล้วนไม่ต้องใช้รูปภาพ GIF หรือ JavaScript
- spinner หมุนด้วย @keyframes และ transform: rotate() ซึ่งทำแอนิเมชันได้อย่างมีประสิทธิภาพ
- markup เป็น element เดียว หรือมี element ลูกไม่กี่ตัวสำหรับแบบ dots และ bars
- เพิ่ม role="status" และข้อความที่ซ่อนจากสายตา เช่น “Loading…” เพื่อให้โปรแกรมอ่านหน้าจอประกาศสถานะ loader
- ควรพิจารณาชะลอหรือหยุด loader เมื่อผู้ใช้ตั้งค่า prefers-reduced-motion
ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ
คำถามที่พบบ่อย
ทำ loading spinner ด้วย CSS อย่างไร?
ใส่ border ให้ element สี่เหลี่ยมจัตุรัสโดยให้ด้านหนึ่งมีสี ใส่ border-radius: 50% และแอนิเมชัน @keyframes แบบหมุน หรือคัดลอกจากเครื่องมือนี้ได้เลย
loader แบบ CSS ดีกว่า GIF ไหม?
โดยทั่วไปใช่ เพราะขนาดเล็กกว่า คมชัดทุกขนาด และเปลี่ยนสีหรือความเร็วได้ด้วย CSS
ทำ loader ให้เข้าถึงได้ (accessible) อย่างไร?
ครอบด้วย element ที่มี role="status" และใส่ข้อความที่ซ่อนไว้ เช่น “Loading…” เพื่อให้เทคโนโลยีช่วยเหลือประกาศสถานะได้
จัด loader ให้อยู่กึ่งกลางหน้าอย่างไร?
วางไว้ใน container ที่มี display: flex; justify-content: center; align-items: center;