วิธีการ - CSS Loader
เรียนรู้วิธีสร้างตัวโหลดล่วงหน้าด้วย CSS
วิธีการสร้างตัวโหลด
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<div class="loader"></div>
ขั้นตอนที่ 2) เพิ่ม CSS:
ตัวอย่าง
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
ตัวอย่างที่อธิบาย
คุณสมบัติborder
ระบุขนาดเส้นขอบและสีเส้นขอบของตัวโหลด คุณสมบัติborder-radius
แปลงตัวโหลดเป็นวงกลม
สิ่งสีน้ำเงินที่หมุนไปรอบ ๆ ภายในเส้นขอบนั้นระบุด้วย
border-top
คุณสมบัติ คุณยังสามารถรวมborder-bottom
และborder-left
/หรือ
border-right
หากคุณต้องการ "สปินเนอร์" เพิ่มเติม (ดูตัวอย่างด้านล่าง)
ขนาดของตัวโหลดถูกระบุด้วยคุณสมบัติwidth
และheight
ในที่สุด เราเพิ่ม a animation
ที่ทำให้สิ่งสีน้ำเงินหมุนตลอดไปด้วยความเร็วของแอนิเมชั่น 2 วินาที
หมายเหตุ:คุณควรใส่คำนำหน้า -webkit- สำหรับเบราว์เซอร์ที่ไม่สนับสนุนคุณสมบัติแอนิเมชั่นและการแปลง คลิกที่ตัวอย่างเพื่อดูวิธีการ
เพิ่มสปินเนอร์เพิ่มเติม
ตัวอย่าง
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
ตัวอย่าง
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
ตัวอย่าง
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
ตัวอย่างอื่น
ตัวอย่างวิธีการวางตัวโหลดไว้ตรงกลางหน้าและแสดง "เนื้อหาหน้า" เมื่อโหลดเสร็จ: