Softonic

เครื่องมือสร้างสปินเนอร์โหลด CSS

ขั้นตอน 1 / 2
ถัดไป

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

วิธีรับ CSS ของสปินเนอร์โหลด

  1. 1

    เลือกขนาด

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

  2. 2

    เลือกความหนาและสี

    ตั้งความหนาของวงกลมเป็นพิกเซล และเลือกสีของส่วนโค้งที่เคลื่อนไหวจากช่องสี

  3. 3

    ตั้งความเร็ว

    ป้อนจำนวนวินาทีสำหรับหนึ่งรอบ ค่า 1 เป็นค่าเริ่มต้นที่นิยมใช้

  4. 4

    คัดลอก CSS

    ใช้ปุ่มคัดลอกข้างกล่อง CSS แล้ววางกฎลงในสไตล์ชีตของคุณ

สิ่งที่คุณจะได้รับ

เครื่องมือเขียนกฎสองข้อ ได้แก่คลาส .loader และบล็อก @keyframes spin คลาสวาดวงกลม ใส่เส้นขอบสีเทาอ่อนให้วงกลม และลงสีที่ขอบด้านบนของเส้นขอบนั้น ส่วน keyframes ทำให้วงกลมหมุนหนึ่งรอบ และบรรทัด animation ทำให้การหมุนนั้นวนซ้ำไม่สิ้นสุด ไม่ต้องใช้อะไรเพิ่ม ไม่มีไฟล์รูปภาพ ไม่มีฟอนต์ไอคอน และไม่มีสคริปต์

เมื่อใช้ค่าเริ่มต้น (60 px, เส้นขอบ 6 px, #10b981, 1 วินาที) ผลลัพธ์จะเป็นดังนี้:

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

เพิ่มลงในหน้าของคุณ

วาง CSS ลงในสไตล์ชีต จากนั้นเพิ่มองค์ประกอบว่างหนึ่งชิ้นตรงตำแหน่งที่ต้องการให้ตัวโหลดปรากฏ:

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

แสดงองค์ประกอบนี้ในขณะที่งานกำลังทำงาน และลบออกหรือซ่อนด้วย display: none เมื่อเนื้อหามาถึง แอตทริบิวต์ role และ aria-label ช่วยให้โปรแกรมอ่านหน้าจอประกาศสถานะได้

ขนาดที่เหมาะสม

ตำแหน่งที่วาง ขนาด ความหนา
ภายในปุ่มขนาดเล็ก 16 ถึง 20 px 2 px
ข้างบรรทัดข้อความ 20 ถึง 28 px 3 px
การ์ดหรือแผง 40 ถึง 60 px 4 ถึง 6 px
กลางหน้าว่าง 60 ถึง 100 px 6 ถึง 8 px

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

สิ่งที่ควรรู้

  • สีของแทร็กตั้งไว้เป็นสีเทาอ่อน (#eee) หากพื้นหลังเป็นสีเข้ม ให้แก้ค่านี้ในโค้ด CSS ที่วางไว้
  • เครื่องมือสร้างสปินเนอร์วงกลมเพียงแบบเดียว จุด แท่ง หรือรูปร่างอื่นต้องใช้มาร์กอัปต่างออกไป
  • หากโปรเจกต์ของคุณมีคลาสชื่อ loader หรือแอนิเมชันชื่อ spin อยู่แล้ว ให้เปลี่ยนชื่อในโค้ด CSS ที่วางไว้ เพื่อไม่ให้กฎชนกัน

การแสดงและซ่อน

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

คำถามที่พบบ่อย

ได้ ผลลัพธ์เป็น CSS ธรรมดาที่มีคลาสเดียวและกฎ @keyframes หนึ่งข้อ จึงใช้งานได้ในสไตล์ชีตหรือบล็อก style ใดก็ได้ กับแบ็กเอนด์ใดก็ได้

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

CSS ที่สร้างขึ้นให้สีเฉพาะเส้นขอบด้านบนของวงกลม เมื่อวงกลมหมุน ส่วนโค้งที่มีสีเพียงส่วนเดียวนี้จะเคลื่อนไปรอบ ๆ วงแหวนสีเทาอ่อน ทำให้เกิดลักษณะการหมุน

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

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

เครื่องมือนี้มีให้บริการในภาษาอื่น

คู่มือและกรณีการใช้งาน