เครื่องมือสร้างสปินเนอร์แบบโอเวอร์เลย์ CSS

สองส่วน: สปินเนอร์และโอเวอร์เลย์

เครื่องมือสร้างสปินเนอร์ ซึ่งได้แก่คลาส .loader และกฎ @keyframes spin ส่วนโอเวอร์เลย์เป็นกรอบห่อแยกที่คุณเพิ่มเอง กรอบห่อนี้ครอบคลุมพื้นที่แสดงผลทั้งหมดและจัดองค์ประกอบลูกไว้กึ่งกลาง การแยกแบบนี้มีประโยชน์ เพราะคุณใช้สปินเนอร์ตัวเดียวกันในปุ่มหรือการ์ดได้ และใช้กรอบห่อเฉพาะเมื่อต้องการสถานะที่บล็อกการใช้งาน

CSS ของกรอบห่อ

วาง CSS นี้ต่อจากกฎที่สร้างขึ้น:

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

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

position: fixed ร่วมกับ inset: 0 ทำให้ชั้นนี้ขยายไปถึงขอบทั้งสี่ด้านของหน้าจอ การตั้งค่า flex จัดให้สปินเนอร์อยู่กึ่งกลางทั้งแนวนอนและแนวตั้ง ส่วน z-index ทำให้ชั้นนี้อยู่เหนือเนื้อหาปกติ หากส่วนหัวหรือหน้าต่างป๊อปอัปยังแสดงทับอยู่ ให้เพิ่มค่านี้

ปิดทับเฉพาะบางพื้นที่แทนทั้งหน้า

หากมีเพียงการ์ดหรือตารางที่กำลังโหลด ให้ตั้ง position: relative ให้คอนเทนเนอร์ของส่วนนั้น และเปลี่ยนกรอบห่อเป็น position: absolute:

.panel { position: relative; }
.panel .overlay { position: absolute; }

ส่วนอื่นของหน้ายังใช้งานได้ตามปกติ และเฉพาะแผงนั้นจะถูกทำให้มืดลง

เลือกสีโอเวอร์เลย์ให้เข้ากับหน้า

บนหน้าสีเข้ม ให้เปลี่ยนสีแทร็ก #eee ในโค้ด CSS ของสปินเนอร์ที่วางไว้ด้วย เพื่อไม่ให้วงแหวนเรืองแสงจนเกินไป

แนวทางปฏิบัติที่ดี

• ลบโอเวอร์เลย์ทันทีที่งานเสร็จ มิฉะนั้นหน้าจะถูกบล็อกค้างไว้
• ใช้กับการรอสั้น ๆ สำหรับงานที่ใช้เวลานาน ให้แสดงข้อความที่อธิบายว่ากำลังเกิดอะไรขึ้น
• โอเวอร์เลย์และการจัดการโฟกัสเป็นมาร์กอัปของคุณเอง เครื่องมือนี้ให้เฉพาะสปินเนอร์

หยุดไม่ให้หน้าเลื่อน

โอเวอร์เลย์แบบคงที่จะซ่อนหน้า แต่หน้าที่อยู่ด้านหลังยังเลื่อนได้ด้วยล้อเมาส์หรือการสัมผัส หากเป็นปัญหา ให้เพิ่ม overflow: hidden; ให้กับ body ขณะที่โอเวอร์เลย์แสดงอยู่ และลบออกเมื่อโอเวอร์เลย์หายไป ควรผูกกฎนี้ไว้กับจังหวะเดียวกับที่แสดงและซ่อนโอเวอร์เลย์ เพื่อไม่ให้ทั้งสองอย่างไม่ตรงกัน