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

ทำไมสปินเนอร์นี้จึงเรียบง่าย

ตัวโหลดหลายแบบใช้องค์ประกอบซ้อนกันหลายชั้น ภาพพื้นหลัง หรือสคริปต์ ตัวนี้เป็น div เดียวที่จัดสไตล์เป็นวงกลม วงแหวนประกอบจากเส้นขอบ และมีเพียงด้านบนของเส้นขอบเท่านั้นที่มีสีต่างออกไป เมื่อหมุนวงกลม ส่วนที่มีสีนั้นจะเคลื่อนไปรอบ ๆ เทคนิคทั้งหมดมีสี่แนวคิด:

1. กล่องสี่เหลี่ยมจัตุรัสที่มีความกว้างและความสูงเท่ากัน
2. border-radius: 50% เพื่อเปลี่ยนกล่องให้เป็นวงกลม
3. เส้นขอบสีเทาที่มีด้านเดียวเป็นสี ผ่าน border-top-color
4. แอนิเมชันการหมุนที่ไม่มีวันหยุด

โค้ดทั้งหมด

.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); }
}

<div class="loader"></div>

ตัวโหลดนี้มีเพียงเท่านี้ ไม่มีอะไรให้ดาวน์โหลด และไม่มีดีเพนเดนซีที่ต้องคอยอัปเดต

จัดให้อยู่ตรงกลาง

วงแหวนเป็นองค์ประกอบบล็อกปกติ หากต้องการจัดให้อยู่ตรงกลางของหน้าหรือภายในคอนเทนเนอร์ ให้เพิ่ม margin: 0 auto; ให้ .loader เพื่อจัดกึ่งกลางแนวนอน หรือกำหนดให้องค์ประกอบแม่เป็นคอนเทนเนอร์แบบ flex:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

เครื่องมือนี้ไม่ได้ทำอะไร

• สร้างเฉพาะสไตล์ของวงแหวน จุดเรียงแถว แท่ง และตัวโหลดแบบการเต้นเป็นการออกแบบที่แตกต่างกัน
• สีของแทร็กตายตัวเป็นสีเทาอ่อน แก้ไขในโค้ด CSS ที่วางไว้หากพื้นหลังของคุณเป็นสีเข้ม
• ไม่ได้เพิ่มแอตทริบิวต์การเข้าถึงลงในมาร์กอัปของคุณ ให้เพิ่ม role="status" และ aria-label ให้องค์ประกอบด้วยตนเอง

ปรับแต่งเล็กน้อยหลังคัดลอก

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

คุณยังเปลี่ยนสีแทร็กได้ด้วยการแก้ #eee ให้เป็นสีที่เข้ากับหน้าของคุณ ส่วนโค้งที่หมุนจะคงสีที่คุณเลือกไว้ในเครื่องมือ