สร้างตัวแสดงสถานะกำลังโหลดด้วย CSS ล้วน
ยังไม่มีความคิดเห็น มาเป็นคนแรกกันเลย!
เลือกจากแอนิเมชันโหลดแบบ CSS ล้วน 10 แบบ ปรับสี ขนาด และความเร็ว แล้วคัดลอก HTML และ CSS ไม่ต้องใช้ JavaScript จึงใส่ในหน้าเว็บหรือเฟรมเวิร์กใดก็ได้
วงกลมหมุน จุดเด้ง แถบความคืบหน้า คลื่น ชีพจร และอื่น ๆ — เป็น CSS ล้วนทั้งหมด
ไม่ ทุกแอนิเมชันเป็น CSS ล้วน ไม่พึ่งพา JavaScript
ได้ มีตัวเลือกสีและตัวควบคุมขนาด พร้อมตัวอย่างทันทีและผลลัพธ์ CSS
เลือกประเภทแอนิเมชัน
⚡ ค่าน้อยลง = แอนิเมชันเร็วขึ้น
<!-- HTML -->
<div class="loader" style="width:40px;height:40px"></div>
<!-- CSS -->
<style>
.loader {
border: 4px solid rgba(0,0,0,0.1);
border-top-color: #6366f1;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>สร้างโค้ดเบลอพื้นหลังและขอบโปร่งแสงแบบเรียลไทม์