เรียนรู้วิธีการสร้าง preloader กับ 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 ถ้าคุณต้องการมากขึ้น "spinners" (see example below)
ขนาดของโหลดที่ระบุไว้กับ width และ height คุณสมบัติ
ที่ผ่านมาเราเพิ่ม animation ที่ทำให้สิ่งที่ปั่นสีฟ้าตลอดไปด้วยความเร็วในการเคลื่อนไหว 2 สอง
หมายเหตุ: นอกจากนี้คุณควรจะมีคำนำหน้า -webkit- และ -ms- เบราว์เซอร์ที่ไม่สนับสนุนการเคลื่อนไหวและการเปลี่ยนคุณสมบัติ คลิกที่ตัวอย่างเพื่อดูว่า
เพิ่มเหยื่อมากขึ้น
ตัวอย่าง
.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;
} ลองตัวเอง» ตัวอย่างอื่น
ตัวอย่างของวิธีการที่จะวางรถตักดินที่อยู่ตรงกลางของหน้าและแสดง "page content" เมื่อโหลดเสร็จสมบูรณ์: