เราได้ดูที่สปินเนอร์ เราได้ดูที่จุด ตอนนี้เราจะจัดการกับรูปแบบทั่วไปอื่นสำหรับรถตัก: ราว. และเรากำลังจะทำสิ่งเดียวกันในบทความที่สามของซีรีส์นี้ เนื่องจากเรามีองค์ประกอบอื่นๆ ด้วยการสร้างองค์ประกอบเพียงองค์ประกอบเดียวและด้วย CSS ที่ยืดหยุ่น ซึ่งทำให้สร้างรูปแบบต่างๆ ได้ง่าย
บทความชุด
- ตัวโหลดองค์ประกอบเดียว: สปินเนอร์
- ตัวโหลดแบบองค์ประกอบเดียว: The Dots
- Single Element Loaders: บาร์ — คุณอยู่ที่นี่
- ตัวโหลดองค์ประกอบเดียว: ไป 3D — มาวันที่ 1 กรกฎาคม
เริ่มจากไม่ใช่หนึ่ง ไม่ใช่สอง แต่มี 20 ตัวอย่างของตัวโหลดแบบแท่ง
อะไร?! คุณจะลงรายละเอียดแต่ละอย่างหรือไม่? นั่นมากเกินไปสำหรับบทความ!
แวบแรกอาจดูเหมือนอย่างนั้น! แต่ทั้งหมดนั้นใช้โครงสร้างโค้ดเดียวกัน และเราอัปเดตค่าเพียงไม่กี่ค่าเพื่อสร้างรูปแบบต่างๆ นั่นคือพลังทั้งหมดของ CSS เราไม่ได้เรียนรู้วิธีสร้างตัวโหลดเพียงตัวเดียว แต่เราเรียนรู้เทคนิคต่างๆ ที่ช่วยให้เราสร้างตัวโหลดได้มากเท่าที่เราต้องการโดยใช้เพียงโครงสร้างโค้ดเดียวกัน
มาทำบาร์กันเถอะ!
เราเริ่มต้นด้วยการกำหนดขนาดสำหรับพวกเขาโดยใช้ width
(หรือ height
) ด้วย aspect-ratio
เพื่อรักษาสัดส่วน:
.bars { width: 45px; aspect-ratio: 1;
}
เราจัดเรียงแถบ "ปลอม" สามแท่งที่มีการไล่ระดับสีเชิงเส้นบนพื้นหลัง ซึ่งคล้ายกับวิธีที่เราสร้างตัวโหลดดอทในส่วนที่ 2 ของชุดนี้
.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}
รหัสด้านบนจะให้ผลลัพธ์ต่อไปนี้แก่เรา:
เช่นเดียวกับบทความอื่น ๆ ในชุดนี้ เราจะจัดการกับหลาย ๆ อย่าง background
กลอุบาย ดังนั้น หากคุณรู้สึกว่าเรากระโดดเร็วเกินไปหรือรู้สึกว่าคุณต้องการรายละเอียดเพิ่มเติม โปรดตรวจสอบสิ่งเหล่านั้น นอกจากนี้คุณยังสามารถอ่านของฉัน Stack Overflow ตอบที่ฉันให้ คำอธิบายโดยละเอียด เกี่ยวกับวิธีการทำงานทั้งหมดนี้
เคลื่อนไหวบาร์
เราทำให้ขนาดหรือตำแหน่งขององค์ประกอบเคลื่อนไหวเพื่อสร้างตัวโหลดแท่ง มาทำให้ขนาดเคลื่อนไหวโดยกำหนดคีย์เฟรมของแอนิเมชันต่อไปนี้:
@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}
ดูว่าเกิดอะไรขึ้นที่นั่น? ระหว่าง 0% ถึง 100% ภาพเคลื่อนไหวจะเปลี่ยน background-size
ของการไล่ระดับสีพื้นหลังขององค์ประกอบ แต่ละคีย์เฟรมกำหนดขนาดพื้นหลังสามขนาด (หนึ่งขนาดสำหรับการไล่ระดับสีแต่ละครั้ง)
และนี่คือสิ่งที่เราได้รับ:
คุณลองจินตนาการถึงรูปแบบต่างๆ ที่เป็นไปได้ทั้งหมดที่เราสามารถทำได้โดยเล่นกับการกำหนดค่าภาพเคลื่อนไหวที่แตกต่างกันสำหรับขนาดหรือตำแหน่งหรือไม่
มาแก้ไซส์ให้ 20% 50%
และอัพเดทตำแหน่งในครั้งนี้:
.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}
…ซึ่งทำให้เราได้รับอีกตัวโหลด!
คุณคงรู้เคล็ดลับแล้ว สิ่งที่คุณต้องมีคือกำหนดไทม์ไลน์ที่คุณแปลเป็นคีย์เฟรม โดยทำให้ขนาดเคลื่อนไหว ตำแหน่ง — หรือทั้งสองอย่าง! — มีตัวเลือกโหลดเดอร์มากมายที่ปลายนิ้วของเรา
และเมื่อเราคุ้นเคยกับเทคนิคดังกล่าวแล้ว เราก็สามารถไปต่อและใช้การไล่ระดับสีที่ซับซ้อนมากขึ้นเพื่อสร้างความสม่ำเสมอ ข้อมูลเพิ่มเติม รถตัก
คาดว่าสำหรับสองตัวอย่างสุดท้ายในการสาธิตนั้น ตัวโหลดแท่งทั้งหมดใช้มาร์กอัปและสไตล์พื้นฐานเดียวกัน และแอนิเมชั่นที่แตกต่างกัน เปิดโค้ดแล้วลองนึกภาพแต่ละเฟรมแยกกัน คุณจะเห็นว่าการทำหลายสิบเป็นเรื่องค่อนข้างไร้สาระ — ถ้าไม่ใช่หลักร้อย - ของรูปแบบต่างๆ
เริ่มจินตนาการ
คุณจำเคล็ดลับหน้ากากที่เราทำกับดอทโหลดเดอร์ใน บทความที่สองของชุดนี้? เราสามารถทำได้เช่นเดียวกันที่นี่!
หากเราใช้ตรรกะข้างต้นทั้งหมดภายใน mask
คุณสมบัติ เราสามารถใช้การกำหนดค่าพื้นหลังใดๆ เพื่อเพิ่มสีสันที่สวยงามให้กับรถตักของเรา
มาสาธิตและอัปเดตกัน:
ทั้งหมดที่ฉันทำคืออัปเดตทั้งหมด background-*
กับ mask-*
และฉันเพิ่มการไล่ระดับสี ง่ายๆ แค่นี้เอง เรายังได้ตัวโหลดเจ๋งๆ มาอีกตัว
จึงไม่มีความแตกต่างระหว่างจุดและบาร์?
ไม่แตกต่าง! ฉันเขียนบทความที่แตกต่างกันสองบทความเพื่อครอบคลุมตัวอย่างให้ได้มากที่สุด แต่ในทั้งสองฉบับ ฉันกำลังใช้เทคนิคเดียวกัน:
- การไล่ระดับสีเพื่อสร้างรูปร่าง (จุดหรือแท่งหรืออย่างอื่น)
- ภาพเคลื่อนไหว
background-size
และ / หรือbackground-position
เพื่อสร้างแอนิเมชั่นตัวโหลด - มาส์กเพิ่มสีสันให้สัมผัส
ปัดเศษบาร์
คราวนี้มาลองอะไรที่แตกต่างออกไปกัน โดยที่เราจะสามารถปัดขอบของแท่งเหล็กของเราได้
ใช้องค์ประกอบเดียวและของมัน ::before
และ ::after
pseudos เรากำหนดแถบที่เหมือนกันสามแท่ง:
.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }
นั่นทำให้เรามีสามแท่ง คราวนี้โดยไม่ต้องอาศัยการไล่ระดับสีเชิงเส้น:
ตอนนี้เคล็ดลับคือการเติมแถบเหล่านั้นด้วยการไล่ระดับสีที่สวยงาม เพื่อจำลองการไล่ระดับสีแบบต่อเนื่อง เราต้องเล่นด้วย background
คุณสมบัติ. ในรูปด้านบน พื้นที่สีเขียวกำหนดพื้นที่ที่ครอบคลุมโดยตัวโหลด พื้นที่นั้นควรเท่ากับขนาดของการไล่ระดับสี และถ้าเราทำคณิตศาสตร์ เท่ากับ คูณทั้งสองข้างที่ติดป้ายกำกับ S
ในแผนภาพหรือ background-size: var(--s) var(--s)
.
เนื่องจากองค์ประกอบของเราถูกจัดวางแยกกัน เราจึงต้องอัปเดตตำแหน่งของการไล่ระดับสีภายในแต่ละองค์ประกอบเพื่อให้แน่ใจว่าซ้อนทับกันทั้งหมด ด้วยวิธีนี้ เรากำลังจำลองการไล่ระดับสีแบบต่อเนื่องหนึ่งอัน แม้ว่าจะเป็น XNUMX อันจริงๆ ก็ตาม
สำหรับองค์ประกอบหลัก (วางไว้ที่กึ่งกลาง) พื้นหลังจะต้องอยู่ตรงกลาง เราใช้สิ่งต่อไปนี้:
.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}
สำหรับองค์ประกอบหลอกทางด้านซ้าย เราต้องการพื้นหลังทางด้านซ้าย
.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}
และสำหรับหลอกทางด้านขวา พื้นหลังจะต้องอยู่ในตำแหน่งที่ถูกต้อง:
.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}
โดยใช้ตัวแปร CSS เดียวกัน --_i
ที่เราใช้ในการแปล เราสามารถเขียนโค้ดดังนี้:
.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }
ตอนนี้ สิ่งที่เราต้องทำคือทำให้ส่วนสูงเคลื่อนไหวและเพิ่มการหน่วงเวลา! ต่อไปนี้คือตัวอย่างสามตัวอย่างที่สิ่งที่แตกต่างออกไปคือสีและขนาด:
ตัดขึ้น
ฉันหวังว่าจนถึงตอนนี้ คุณจะรู้สึกได้รับกำลังใจอย่างมากจากพลังทั้งหมดที่คุณมีในการสร้างแอนิเมชั่นการโหลดที่ดูซับซ้อน ทั้งหมดที่เราต้องการคือองค์ประกอบเดียว ไม่ว่าจะเป็นการไล่ระดับสีหรือการจำลองเพื่อวาดแท่ง จากนั้นใช้คีย์เฟรมบางส่วนเพื่อเคลื่อนย้ายสิ่งต่างๆ นั่นคือสูตรทั้งหมดสำหรับการได้รับความเป็นไปได้มากมายอย่างไม่รู้จบ ออกไปและเริ่มทำอาหารที่เรียบร้อย!
จนกว่าจะถึงบทความหน้า ฉันจะฝากคอลเลกชั่นรถตักตลกๆ ที่ฉันรวมไว้ให้คุณ จุด และ บาร์!
บทความชุด
- ตัวโหลดองค์ประกอบเดียว: สปินเนอร์
- ตัวโหลดแบบองค์ประกอบเดียว: The Dots
- Single Element Loaders: บาร์ — คุณอยู่ที่นี่
- ตัวโหลดองค์ประกอบเดียว: ไป 3D — มาวันที่ 1 กรกฎาคม
ตัวโหลดองค์ประกอบเดียว: The Bars เผยแพร่ครั้งแรกเมื่อ CSS-เคล็ดลับ. คุณควร รับจดหมายข่าว.
- "
- 3d
- a
- ที่เพิ่ม
- ทั้งหมด
- อื่น
- คำตอบ
- ใช้
- AREA
- รอบ
- บทความ
- บทความ
- พื้นหลัง
- ราว
- ก่อน
- ระหว่าง
- ทั้งสองด้าน
- สามารถรับ
- รหัส
- ชุด
- รวม
- ร่วมกัน
- ซับซ้อน
- องค์ประกอบ
- เนื้อหา
- ควบคุม
- หน้าปก
- สร้าง
- ที่สร้างขึ้น
- จัดการ
- รายละเอียด
- รายละเอียด
- DID
- ความแตกต่าง
- ต่าง
- มิติ
- แสดง
- แต่ละ
- องค์ประกอบ
- ฯลฯ
- ตัวอย่าง
- FAST
- รูป
- ชื่อจริง
- แก้ไขปัญหา
- มีความยืดหยุ่น
- ดังต่อไปนี้
- FRAME
- ตลก
- ต่อไป
- ได้รับ
- ไป
- สีเขียว
- ตะแกรง
- ความสูง
- โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม
- ความหวัง
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- ทำอย่างไร
- HTTPS
- อิสระ
- IT
- กรกฎาคม
- เรียนรู้
- ทิ้ง
- น้อย
- โหลด
- โหลด
- มอง
- เก็บรักษา
- ทำ
- ทำให้
- การทำ
- หน้ากาก
- คณิตศาสตร์
- อาจ
- ข้อมูลเพิ่มเติม
- ย้าย
- คูณ
- ความต้องการ
- ถัดไป
- จำนวน
- เปิด
- อื่นๆ
- ส่วนหนึ่ง
- แบบแผน
- เล่น
- เล่น
- กรุณา
- ตำแหน่ง
- ตำแหน่ง
- ความเป็นไปได้
- เป็นไปได้
- อำนาจ
- คุณสมบัติ
- คุณสมบัติ
- การตีพิมพ์
- ปัดเศษ
- เดียวกัน
- ชุด
- รูปร่าง
- คล้ายคลึงกัน
- ง่าย
- เดียว
- ขนาด
- ขนาด
- So
- บาง
- บางสิ่งบางอย่าง
- ช่องว่าง
- เริ่มต้น
- เทคนิค
- พื้นที่
- สิ่ง
- สิ่ง
- สาม
- เวลา
- แตะ
- แปลง
- บันทึก
- การปรับปรุง
- us
- ใช้
- อะไร
- ไม่มี
- โรงงาน