ตัวโหลดองค์ประกอบเดียว: The Bars

เราได้ดูที่สปินเนอร์ เราได้ดูที่จุด ตอนนี้เราจะจัดการกับรูปแบบทั่วไปอื่นสำหรับรถตัก: ราว. และเรากำลังจะทำสิ่งเดียวกันในบทความที่สามของซีรีส์นี้ เนื่องจากเรามีองค์ประกอบอื่นๆ ด้วยการสร้างองค์ประกอบเพียงองค์ประกอบเดียวและด้วย CSS ที่ยืดหยุ่น ซึ่งทำให้สร้างรูปแบบต่างๆ ได้ง่าย

เริ่มจากไม่ใช่หนึ่ง ไม่ใช่สอง แต่มี 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-* และฉันเพิ่มการไล่ระดับสี ง่ายๆ แค่นี้เอง เรายังได้ตัวโหลดเจ๋งๆ มาอีกตัว

จึงไม่มีความแตกต่างระหว่างจุดและบาร์?

ไม่แตกต่าง! ฉันเขียนบทความที่แตกต่างกันสองบทความเพื่อครอบคลุมตัวอย่างให้ได้มากที่สุด แต่ในทั้งสองฉบับ ฉันกำลังใช้เทคนิคเดียวกัน:

1. การไล่ระดับสีเพื่อสร้างรูปร่าง (จุดหรือแท่งหรืออย่างอื่น)
2. ภาพเคลื่อนไหว background-size และ / หรือ background-position เพื่อสร้างแอนิเมชั่นตัวโหลด
3. มาส์กเพิ่มสีสันให้สัมผัส

ปัดเศษบาร์

คราวนี้มาลองอะไรที่แตกต่างออกไปกัน โดยที่เราจะสามารถปัดขอบของแท่งเหล็กของเราได้

ใช้องค์ประกอบเดียวและของมัน ::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 Bars เผยแพร่ครั้งแรกเมื่อ CSS-เคล็ดลับ. คุณควร รับจดหมายข่าว.

• คอยน์สมาร์ท การแลกเปลี่ยน Bitcoin และ Crypto ที่ดีที่สุดในยุโรป
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าฟรี
• คริปโตฮอว์ก เรดาร์ Altcoin ทดลองฟรี.
• ที่มา: https://css-tricks.com/single-element-loaders-the-bars/