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

การสร้างตัวโหลด CSS เท่านั้นเป็นหนึ่งในงานที่ฉันโปรดปราน การดูแอนิเมชั่นที่ไม่มีที่สิ้นสุดนั้นเป็นเรื่องที่น่าพึงพอใจเสมอ และแน่นอนว่ามี จำนวนมาก ของเทคนิคและวิธีการทำ — ไม่ต้อง มองให้ไกลกว่า CodePen เพื่อดูว่ามีกี่คน อย่างไรก็ตาม ในบทความนี้ เราจะมาดูวิธีการสร้างตัวโหลดองค์ประกอบเดียวโดยเขียนโค้ดให้น้อยที่สุด

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

สำหรับบทความแรกนี้ เราจะสร้างรูปแบบตัวโหลดทั่วไปรูปแบบหนึ่ง: แท่งหมุน:

นี่คือแนวทาง

การใช้งานเล็กน้อยสำหรับตัวโหลดนี้คือการสร้างหนึ่งองค์ประกอบสำหรับแต่ละแท่งที่อยู่ภายในองค์ประกอบหลัก (สำหรับองค์ประกอบทั้งหมดเก้าองค์ประกอบ) จากนั้นเล่นกับ opacity และ transform เพื่อให้ได้เอฟเฟกต์การหมุน

การใช้งานของฉันต้องใช้เพียงองค์ประกอบเดียว:

<div class="loader"></div>

…และการประกาศ CSS 10 รายการ:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

มาทำลายมันกันเถอะ

เมื่อดูแวบแรก โค้ดอาจดูแปลกๆ แต่คุณจะเห็นว่าโค้ดนี้ง่ายกว่าที่คุณคิด ขั้นตอนแรกคือการกำหนดขนาดขององค์ประกอบ ในกรณีของเราคือ 150px สี่เหลี่ยม. เราใส่ได้ aspect-ratio เพื่อใช้เพื่อให้องค์ประกอบยังคงเป็นสี่เหลี่ยมจัตุรัสไม่ว่าจะเกิดอะไรขึ้น

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

เมื่อสร้างตัวโหลด CSS ฉันพยายามมีค่าหนึ่งค่าสำหรับควบคุมขนาดโดยรวมเสมอ ในกรณีนี้คือ width และการคำนวณทั้งหมดที่เราครอบคลุมจะอ้างอิงถึงค่านั้น สิ่งนี้ทำให้ฉันเปลี่ยนค่าเดียวเพื่อควบคุมตัวโหลด เป็นสิ่งสำคัญเสมอที่จะสามารถปรับขนาดของตัวโหลดของเราได้อย่างง่ายดายโดยไม่จำเป็นต้องปรับค่าเพิ่มเติมจำนวนมาก

ต่อไป เราจะใช้การไล่ระดับสีเพื่อสร้างแถบ นี่เป็นส่วนที่ยากที่สุด! มาใช้กัน หนึ่ง ไล่ระดับเพื่อสร้าง สอง บาร์เช่นด้านล่าง:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

การไล่ระดับสีของเราถูกกำหนดด้วยสีเดียวและหยุดสองสี ผลที่ได้คือสีทึบโดยไม่มีการซีดจางหรือการเปลี่ยนภาพ ขนาดเท่ากับ 34% กว้างและ 8% สูง. มันยังวางไว้ตรงกลาง (50%). เคล็ดลับคือการใช้ค่าของคำหลัก space — สิ่งนี้จะทำซ้ำการไล่ระดับสี ทำให้เรามีแถบทั้งหมดสองแถบ

จาก ข้อมูลจำเพาะ:

รูปภาพจะถูกทำซ้ำบ่อยเท่าที่จะพอดีกับพื้นที่กำหนดตำแหน่งพื้นหลังโดยไม่ถูกตัดออก จากนั้นรูปภาพจะถูกเว้นระยะให้เต็มพื้นที่ ภาพแรกและภาพสุดท้ายสัมผัสกับขอบของพื้นที่

ฉันใช้ความกว้างเท่ากับ 34% ซึ่งหมายความว่าเราไม่สามารถมีมากกว่าสองแท่ง (3*34% มีค่ามากกว่า 100%) แต่ด้วยสองแท่งเราจะมีช่องว่าง (100% - 2 * 34% = 32%). ช่องว่างนั้นถูกวางไว้ตรงกลางระหว่างสองแท่ง กล่าวอีกนัยหนึ่ง เราใช้ความกว้างสำหรับการไล่ระดับสีที่อยู่ระหว่าง 33% และ 50% เพื่อให้แน่ใจว่าเรามีแถบอย่างน้อยสองแท่งที่มีช่องว่างระหว่างกันเล็กน้อย มูลค่า space คือสิ่งที่ถูกต้องสำหรับเรา

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

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

เราสามารถเพิ่มประสิทธิภาพได้โดยใช้ตัวแปร CSS เพื่อหลีกเลี่ยงการเกิดซ้ำ:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

ดังนั้น ตอนนี้ เรามีสี่แถบ และด้วยตัวแปร CSS เราจึงสามารถเขียนค่าสีเพียงครั้งเดียว ซึ่งทำให้ง่ายต่อการอัปเดตในภายหลัง (เช่นเดียวกับที่เราทำกับขนาดของตัวโหลด)

ในการสร้างแถบที่เหลือ ให้แตะที่ .loader องค์ประกอบและของมัน ::before องค์ประกอบหลอกเพื่อให้ได้แท่งอีกสี่แท่งรวมเป็นแปดทั้งหมด

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

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

ทีนี้มาหมุนองค์ประกอบหลอกโดย 45deg เพื่อจัดตำแหน่งแถบที่เหลือ วางเมาส์เหนือตัวอย่างต่อไปนี้เพื่อดูเคล็ดลับ:

การตั้งค่าความทึบ

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

mask: conic-gradient(from 22deg,#0003,#000);

เพื่อให้เห็นเคล็ดลับได้ดีขึ้น ลองใช้สิ่งนี้กับกล่องสีเต็มรูปแบบ:

ความโปร่งใสของสีแดงค่อยๆ เพิ่มขึ้นตามเข็มนาฬิกา เราใช้สิ่งนี้กับตัวโหลดของเรา และเรามีแท่งที่มีความทึบต่างกัน:

ในความเป็นจริง แต่ละแถบดูเหมือนจะจางลงเนื่องจากถูกปิดบังด้วยการไล่ระดับสีและอยู่ระหว่างสีกึ่งโปร่งใสสองสี มันแทบจะสังเกตไม่เห็นเมื่อสิ่งนี้ทำงาน ดังนั้นมันเหมือนกับสามารถพูดได้ว่าแถบทั้งหมดมีสีเดียวกันโดยมีความทึบต่างกัน

การหมุน

ลองใช้แอนิเมชั่นการหมุนเพื่อรับตัวโหลดของเรา โปรดทราบว่าเราจำเป็นต้องมีแอนิเมชั่นแบบสเต็ปและไม่ใช่แอนิเมชั่นต่อเนื่องนั่นคือสาเหตุที่ฉันใช้ steps(8). 8 ไม่มีอะไรเลยนอกจากจำนวนแท่ง ดังนั้นค่านั้นจึงสามารถเปลี่ยนแปลงได้ขึ้นอยู่กับจำนวนแท่งที่ใช้

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

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

เนื่องจากเราใช้เพียง ::before องค์ประกอบหลอก เราสามารถเพิ่มอีกสี่แท่งโดยใช้ ::after ลงท้ายด้วยทั้งหมด 12 แท่งและเกือบจะเป็นรหัสเดียวกัน:

เราอัปเดตการหมุนขององค์ประกอบหลอกเพื่อพิจารณา 30deg และ 60deg แทน 45deg ในขณะที่ใช้แอนิเมชั่นสิบสองขั้นตอน แทนที่จะเป็นแปดขั้นตอน ฉันยังลดส่วนสูงลงเป็น 5% แทน 8% เพื่อทำให้แท่งบางลงเล็กน้อย

สังเกตด้วยว่าเรามี grid-area: 1/1 บนองค์ประกอบหลอก ทำให้เราสามารถวางพวกมันไว้ในบริเวณเดียวกันโดยวางซ้อนกันได้

คาดเดาอะไร? เราสามารถเข้าถึงตัวโหลดเดียวกันโดยใช้การใช้งานอื่น:

คุณช่วยหาตรรกะที่อยู่เบื้องหลังโค้ดได้ไหม นี่คือคำใบ้: ความทึบไม่ได้รับการจัดการด้วย CSS . อีกต่อไป mask แต่อยู่ในการไล่ระดับสีและยังใช้ opacity คุณสมบัติ

ทำไมไม่จุดแทน?

เราสามารถทำได้โดยสิ้นเชิง:

หากคุณตรวจสอบโค้ด คุณจะเห็นว่าขณะนี้เรากำลังทำงานกับการไล่ระดับสีแบบรัศมีแทนที่จะเป็นแบบเชิงเส้น มิฉะนั้น แนวคิดจะเหมือนกันทุกประการกับมาสก์ที่สร้างความรู้สึกทึบ แต่เราสร้างรูปร่างเป็นวงกลมแทนที่จะเป็นเส้น

ด้านล่างนี้คือภาพที่แสดงการกำหนดค่าการไล่ระดับสีใหม่:

หากคุณกำลังใช้ Safari โปรดทราบว่าการสาธิตอาจมีปัญหา นั่นเป็นเพราะว่าขณะนี้ Safari ขาดการสนับสนุนสำหรับ at ไวยากรณ์ในการไล่ระดับสีแบบรัศมี แต่เราสามารถกำหนดค่าการไล่ระดับสีใหม่ได้เล็กน้อยเพื่อเอาชนะ:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

ตัวอย่างตัวโหลดเพิ่มเติม

นี่เป็นอีกแนวคิดหนึ่งสำหรับตัวโหลดสปินเนอร์ที่คล้ายกับก่อนหน้านี้

คนนี้ผมพึ่ง background และ mask เพื่อสร้างรูปร่าง (ไม่จำเป็นต้องมีองค์ประกอบหลอก) ฉันกำลังกำหนดคอนฟิกูเรชันด้วยตัวแปร CSS เพื่อให้สามารถสร้างรูปแบบต่างๆ มากมายจากโค้ดเดียวกัน — อีกตัวอย่างหนึ่งของพลังของตัวแปร CSS ฉันเขียนบทความเกี่ยวกับเทคนิคนี้อีก หากต้องการรายละเอียดเพิ่มเติม

โปรดทราบว่าเบราว์เซอร์บางตัวยังคงใช้a -webkit- คำนำหน้าสำหรับ mask-composite ด้วยชุดค่าของมันเอง และจะไม่แสดงสปินเนอร์ในการสาธิต มีวิธีทำดังนี้ ไม่มี mast-composite สำหรับการสนับสนุนเบราว์เซอร์เพิ่มเติม

ฉันมีอีกอันสำหรับคุณ:

สำหรับอันนี้ ฉันใช้ a background-color เพื่อควบคุมสีและใช้ mask และ mask-composite เพื่อสร้างรูปร่างสุดท้าย:

ก่อนที่เราจะจบ ต่อไปนี้คือรถตักแบบหมุนบางส่วนที่ฉันทำเมื่อสักครู่นี้ ฉันใช้เทคนิคต่างๆ แต่ยังคงใช้การไล่ระดับสี มาสก์ องค์ประกอบเทียม ฯลฯ อาจเป็นการออกกำลังกายที่ดีในการหาตรรกะของแต่ละรายการและเรียนรู้เทคนิคใหม่ๆ ไปพร้อม ๆ กัน สิ่งนี้กล่าวว่าหากคุณมีคำถามใด ๆ เกี่ยวกับพวกเขา ส่วนความคิดเห็นอยู่ด้านล่าง

ตัดขึ้น

ดูสิ มีอะไรมากมายที่เราสามารถทำได้ใน CSS โดยไม่ต้องใช้อะไรเลยนอกจาก div เดียว, การไล่ระดับสีสองสามอย่าง, องค์ประกอบหลอก, ตัวแปร ดูเหมือนว่าเราได้สร้างรถตักแบบหมุนได้หลายแบบ แต่โดยพื้นฐานแล้วทั้งหมดนั้นเหมือนกันโดยมีการดัดแปลงเล็กน้อย

นี่เป็นเพียงจุดเริ่มต้น ในชุดนี้ เราจะดูแนวคิดเพิ่มเติมและแนวคิดขั้นสูงสำหรับการสร้างตัวโหลด CSS

---

ตัวโหลดองค์ประกอบเดียว: สปินเนอร์ เผยแพร่ครั้งแรกเมื่อ CSS-เคล็ดลับ. คุณควร รับจดหมายข่าว.

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