สร้างตัวโหลด CSS ที่สวยงาม

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

ปรับแต่งตัวโหลดของคุณ

ประเภทรถตัก

Color

Size 40px

Speed 1s

ตัวเลือกขั้นสูง

Preview

.loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #165DFF; width: 40px; height: 40px; animation: spin 1s linear infinite; }  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

วิธีใช้

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

ตัวอย่างตัวโหลดยอดนิยม

พัลส์โหลด

3 Dots ง่ายต่อการนําไปใช้

สปินเนอร์โหลด

Classic 100% CSS

Dual Ring

วงกลมคู่ สไตล์โมเดิร์น

ตัวโหลดตีกลับ

จุดเด้ง แอนิเมชั่นที่ราบรื่น

แหวนโหลด

แหวนพร้อมจุด การออกแบบที่เป็นเอกลักษณ์

เครื่องชั่ง

สเกลจุด Lightweight

วิธีใช้ตัวโหลด CSS

การใช้งานพื้นฐาน

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

ขั้นตอนที่ 1: เพิ่ม CSS

Add the generated CSS code to your stylesheet or in a