ตัวสร้าง CSS Loading Spinner

สร้าง CSS spinner ฟรี เลือกรูปแบบ ring, dots, pulse, bars และอื่น ๆ แล้วคัดลอก HTML กับ CSS ในเบราว์เซอร์

Loading tool...

ตัวสร้าง CSS Loading Spinner คืออะไร?

CSS Loading Spinner Generator เป็นเครื่องมือฟรีในเบราว์เซอร์ที่สร้าง CSS loading spinner และ loader คุณเลือกสไตล์ ตั้งขนาด สี และความเร็ว แล้วคัดลอก HTML กับ CSS หรือดาวน์โหลด stylesheet

ประโยชน์หลัก

พรีวิว spinner 8 แบบก่อนวางโค้ด
จับสีแบรนด์ ขนาด และความเร็วของแอนิเมชัน
คัดลอก CSS, HTML หรือ snippet รวมในคลิกเดียว
สร้างบนอุปกรณ์ โดยไม่อัปโหลดไปเซิร์ฟเวอร์

กรณีการใช้งาน

•ใส่ตัวโหลดให้ฟอร์มหรือสถานะ fetch
•แทน GIF loader ด้วย CSS animation ที่เบา
•เทียบ ring, dots และ bars บนพื้นมืดของ hero
•ส่ง CSS spinner ให้ดีไซเนอร์ไปวางในหน้า landing

วิธีใช้ CSS Loading Spinner Generator

เลือกสไตล์: เลือก ring, dual ring, dots, pulse, bars, ripple, orbit หรือ square ตัวอย่างจะเล่นแอนิเมชันทันที
ปรับรูปลักษณ์: ตั้งขนาด สี ความเร็ว และเมื่อสไตล์นั้นใช้ ให้ตั้งความหนาและสีแทร็ก เปลี่ยนชื่อคลาส CSS หากต้องการ selector ที่ไม่ซ้ำ
ดูตัวอย่าง: สลับพื้นสว่างหรือพื้นมืดเพื่อดู contrast ปรับความเร็วและความหนาจนเข้ากับ UI
คัดลอกโค้ด: คัดลอก CSS, HTML หรือ snippet รวม หรือดาวน์โหลด spinner.css แล้ววางใน stylesheet และ markup

คุณสมบัติหลัก

8 สไตล์ spinner: ring, dual ring, dots, pulse, bars, ripple, orbit และ square
ตัวอย่างสดพร้อมพื้นหลังสว่างและมืด
ปรับขนาด สี สีแทร็ก ความหนา ความเร็ว และชื่อคลาส
คัดลอก CSS, HTML หรือ snippet รวม และดาวน์โหลดไฟล์ CSS
รันในเบราว์เซอร์ทั้งหมด โดยไม่อัปโหลด

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

ต้องใช้ JavaScript สำหรับ spinner เหล่านี้ไหม?

ไม่ แต่ละสไตล์เป็น CSS อย่างเดียว ใช้ keyframes และ div เดียวหรือ span ว่างไม่กี่ตัว วาง HTML กับ CSS ได้เลย ไม่ต้องมีสคริปต์เพื่อให้ขยับ

spinner ใช้ได้บนเบราว์เซอร์เก่าไหม?

เบราว์เซอร์รุ่นใหม่ที่รองรับ CSS animations และ flexbox แสดงได้ทุกสไตล์ เบราว์เซอร์เก่ามากอาจเห็นรูปนิ่งโดยไม่มีแอนิเมชัน

จะทำ spinner ให้เข้าถึงได้ได้อย่างไร?

HTML ที่สร้างมี role status และ aria-label เป็น Loading คง markup นั้นไว้ และซ่อน spinner จาก accessibility tree เมื่อโหลดเสร็จ

CSS ของฉันออกจากหน้านี้ไหม?

ไม่ การสร้างและพรีวิวรันในเบราว์เซอร์ คัดลอกหรือดาวน์โหลดโค้ดได้หลังจากโหลดหน้าแล้ว รวมถึงแบบออฟไลน์

คู่มือฉบับละเอียด

CSS Spinner Generator: สร้าง loading spinner ด้วย CSS ล้วนในไม่กี่วินาที

อ่านคู่มือฉบับเต็ม →

ตัวสร้าง CSS Loading Spinner

เลือกสไตล์ spinner ปรับขนาด สี และความเร็ว แล้วคัดลอก HTML กับ CSS ตัวอย่างจะอัปเดตตามที่ปรับ

สไตล์

ขนาด (48px)

ความเร็ว (0.8s)

ความหนา (4px)

คลาส CSS

ใช้ได้เฉพาะตัวอักษร ตัวเลข underscore และ hyphen ชื่อที่ไม่ถูกต้องจะกลับเป็น css-spinner

สี

สีแทร็ก

ตัวอย่างสด

CSS ที่สร้าง

.css-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: css-spinner-spin 0.8s linear infinite;
  box-sizing: border-box;
}
@keyframes css-spinner-spin {
  to { transform: rotate(360deg); }
}

<div class="css-spinner" role="status" aria-label="Loading"></div>

เกี่ยวกับ CSS Loading Spinner Generator

เครื่องมือนี้สร้าง CSS loading spinner และ loader ที่วางในหน้าเว็บได้ทันที เลือกรูปแบบ ring, dual ring, dots, pulse, bars, ripple, orbit หรือ square แล้วตั้งขนาด สี สีแทร็ก ความหนา ความเร็ว และชื่อคลาส มีตัวอย่างแอนิเมชันสด คัดลอก CSS, HTML หรือ snippet รวม หรือดาวน์โหลดไฟล์ .css ทุกอย่างรันในเบราว์เซอร์ โดยไม่อัปโหลด

ทำไมต้องใช้เครื่องมือนี้

•ได้ CSS spinner พร้อมวาง โดยไม่ต้องไล่หาจากเว็บ snippet
•พรีวิว loader 8 แบบบนพื้นสว่างหรือพื้นมืด
•ปรับขนาด สี ความหนา และความเร็วให้เข้ากับ UI
•บังคับชื่อคลาส CSS ที่ปลอดภัย เพื่อไม่ให้ stylesheet พัง
•ข้อมูลอยู่ที่เครื่องนี้ CSS ถูกสร้างในหน้านี้และไม่ถูกส่งไปเซิร์ฟเวอร์

คุณสมบัติ

✓8 สไตล์ spinner: ring, dual ring, dots, pulse, bars, ripple, orbit และ square
✓ตัวอย่างสดพร้อมพื้นหลังสว่างและมืด
✓ปรับขนาด สี สีแทร็ก ความหนา ความเร็ว และชื่อคลาส
✓คัดลอก CSS, HTML หรือ snippet รวม และดาวน์โหลดไฟล์ CSS
✓รันในเบราว์เซอร์ทั้งหมด โดยไม่อัปโหลด

Loading tool...