เครื่องมือสร้างสปินเนอร์ในปุ่ม CSS

ตัวอย่างการใช้งาน

สมมติว่ามีปุ่ม “บันทึก” สีน้ำเงินเข้มที่มีข้อความสีขาว ในเครื่องมือให้ป้อนขนาด 16 ความหนา 2 สี #ffffff และความเร็ว 0.8 เครื่องมือจะสร้าง:

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

แทร็กของวงกลมเป็นสีเทาอ่อนคงที่ ซึ่งมองเห็นได้บนปุ่มสีเข้ม หากต้องการแทร็กที่กลมกลืนกว่านี้ ให้เปลี่ยน #eee เป็นค่าโปร่งแสง เช่น rgba(255, 255, 255, 0.3) ในโค้ด CSS ที่วางไว้ ส่วนโค้งยังคงเป็นสีที่คุณเลือก

วางไว้ภายในปุ่ม

วางองค์ประกอบของสปินเนอร์ก่อนข้อความ และกำหนดให้ปุ่มเป็นแถวแบบ flex เพื่อให้ทั้งสองอยู่บรรทัดเดียวกันพร้อมระยะห่าง:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="กำลังบันทึก"></span>
  กำลังบันทึก
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

เพิ่มสปินเนอร์และสถานะ disabled เฉพาะตอนที่คำขอกำลังทำงานอยู่ และลบทั้งสองออกเมื่อคำขอเสร็จ การปิดใช้งานปุ่มคือสิ่งที่ป้องกันการส่งซ้ำ ส่วนสปินเนอร์คือสัญญาณที่อธิบายเหตุผล

ขนาดและความหนาสำหรับปุ่ม

หมายเหตุ

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

หลีกเลี่ยงการขยับของเลย์เอาต์

หากสปินเนอร์ปรากฏขึ้นแล้วปุ่มกว้างขึ้นทันที เลย์เอาต์จะขยับและตำแหน่งที่ผู้ใช้คลิกจะเปลี่ยนไป มีสองวิธีแก้ที่ง่าย วิธีแรกคือกำหนดความกว้างขั้นต่ำให้ปุ่มที่พอดีกับทั้งสปินเนอร์และข้อความที่ยาวกว่า วิธีที่สองคือจองพื้นที่ของสปินเนอร์ตั้งแต่ต้นด้วยช่องว่างขนาด 16 px ก่อนข้อความ เนื่องจากวงกลมที่สร้างขึ้นมีความกว้างและความสูงคงที่เป็นพิกเซล จึงจองพื้นที่ที่ต้องการได้ง่ายและแม่นยำ