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

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

ดอทโหลดเดอร์อยู่ทั่วทุกที่ พวกมันเรียบร้อยเพราะปกติแล้วจะประกอบด้วยจุดสามจุดที่ดูเหมือนจุดไข่ปลาข้อความ (…) ที่เต้นรำไปรอบๆ

เป้าหมายของเราคือสร้างสิ่งเดียวกันนี้จากองค์ประกอบ div เดียว กล่าวอีกนัยหนึ่งคือไม่มี div ต่อจุดหรือภาพเคลื่อนไหวแต่ละรายการสำหรับแต่ละจุด

ตัวอย่างของตัวโหลดด้านบนนั้นสร้างด้วยองค์ประกอบ div เดียว การประกาศ CSS สองสามรายการ และไม่มีองค์ประกอบหลอก ฉันกำลังรวมสองเทคนิคโดยใช้ CSS background และ mask. และเมื่อเราทำเสร็จแล้ว เราจะเห็นว่าการไล่สีพื้นหลังแบบเคลื่อนไหวช่วยสร้างภาพลวงตาของแต่ละจุดที่เปลี่ยนสีได้อย่างไร ขณะที่พวกมันเลื่อนขึ้นและลงอย่างต่อเนื่อง

แอนิเมชั่นพื้นหลัง

มาเริ่มกันที่แอนิเมชั่นพื้นหลังกัน:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

ฉันหวังว่านี่จะดูตรงไปตรงมา สิ่งที่เรามีคือ 180px-กว้าง .loader องค์ประกอบที่แสดงการไล่ระดับสีรูปกรวยสองอันโดยมีแถบสีทึบหยุดระหว่างสองสีแต่ละสี การไล่ระดับสีแรกจะเป็นสีแดงและสีน้ำเงินตามครึ่งบนของ .loaderและการไล่ระดับสีที่สองเป็นสีเขียวและสีม่วงตลอดครึ่งล่าง

ขนาดพื้นหลังของตัวโหลด (200% กว้าง) เราจะเห็นสีเหล่านั้นเพียงสีเดียวในแต่ละครึ่ง จากนั้นเราก็มีแอนิเมชั่นเล็กๆ ที่ผลักดันตำแหน่งของการไล่ระดับสีพื้นหลังไปทางซ้าย ขวา และกลับมาอีกครั้งตลอดไปและตลอดไป

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

ในแอนิเมชั่น สังเกตว่าเลเยอร์แรกคือ Y=0% (วางไว้บนสุด) ในขณะที่ X คือการเปลี่ยนแปลงจาก 0% ไปยัง 100%. สำหรับชั้นที่สอง เรามีเหมือนกันสำหรับ X แต่ Y=100% (วางไว้ที่ด้านล่าง).

ทำไมต้องใช้ conic-gradient() แทน linear-gradient()?

คำถามที่ดี! ตามสัญชาตญาณ เราควรใช้การไล่ระดับสีเชิงเส้นเพื่อสร้างการไล่ระดับสีแบบสองสีดังนี้:

linear-gradient(90deg, red 50%, blue 0)

แต่เราสามารถเข้าถึงสิ่งเดียวกันได้โดยใช้ a conic-gradient() — และด้วยรหัสที่น้อยกว่า เราลดโค้ดและเรียนรู้เคล็ดลับใหม่ในกระบวนการ!

การเลื่อนสีไปทางซ้ายและขวาเป็นวิธีที่ดีในการทำให้ดูเหมือนเรากำลังเปลี่ยนสี แต่อาจจะดีกว่าถ้าเราเปลี่ยนสีทันทีแทน ด้วยวิธีนี้จะไม่มีโอกาสที่ตัวโหลดดอทจะกะพริบสองสีพร้อมกัน . เมื่อต้องการทำเช่นนี้ ให้เปลี่ยน animationฟังก์ชันจับเวลาของจาก linear ไปยัง steps(1)

จุดโหลด

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

เรากำลังจะใช้ radial-gradient() สำหรับสิ่งนี้:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

มีโค้ดที่ซ้ำกันอยู่ในนั้น เรามาสร้างตัวแปร CSS เพื่อย่อส่วนต่างๆ กัน:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

เย็นเย็น. แต่ตอนนี้ เราต้องการแอนิเมชั่นใหม่ที่ช่วยย้ายจุดขึ้นและลงระหว่างการไล่ระดับสีแบบเคลื่อนไหว

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

ใช่ นั่นคือทั้งหมดสามการไล่ระดับสีในแนวรัศมี ทั้งหมดนี้มีการกำหนดค่าเดียวกันและขนาดเท่ากัน แอนิเมชั่นจะอัปเดตตำแหน่งของแต่ละรายการ โปรดทราบว่า X พิกัดของแต่ละจุดได้รับการแก้ไข ดิ mask-position ถูกกำหนดให้จุดแรกอยู่ทางซ้าย (0%) อันที่สองตรงกลาง (50%) และอันที่สามทางด้านขวา (100%). เราอัปเดตเท่านั้น Y ประสานงานจาก 0% ไปยัง 100% เพื่อให้จุดเต้นรำ

นี่คือสิ่งที่เราได้รับ:

ตอนนี้ รวมสิ่งนี้เข้ากับแอนิเมชั่นการไล่ระดับสีของเรา และเวทมนตร์ก็เริ่มเกิดขึ้น:

รูปแบบตัวโหลดดอท

ตัวแปร CSS ที่เราทำในตัวอย่างที่แล้วทำให้การสลับสีใหม่ง่ายขึ้นมาก และสร้างรูปแบบอื่นๆ ของตัวโหลดเดียวกัน ตัวอย่างเช่น สีและขนาดต่างๆ:

แล้วการเคลื่อนไหวอื่นสำหรับจุดของเราล่ะ

ที่นี่ ทั้งหมดที่ฉันทำคืออัปเดตแอนิเมชั่นเพื่อพิจารณาตำแหน่งต่างๆ และเราได้ตัวโหลดอีกตัวที่มีโครงสร้างโค้ดเหมือนกัน!

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

ทำไมไม่โหลดเดอร์ที่มีจุดเดียว?

อันนี้น่าจะค่อนข้างง่ายเพราะฉันใช้เทคนิคเดียวกัน แต่มีตรรกะที่ง่ายกว่า:

นี่เป็นอีกตัวอย่างหนึ่งของตัวโหลดที่ฉันสร้างแอนิเมชั่นด้วย radial-gradient รวมกับ ตัวกรอง CSS และ mix-blend-mode เพื่อสร้างเอฟเฟกต์ blobby:

หากคุณตรวจสอบรหัส คุณจะเห็นว่าทั้งหมดที่ฉันทำอยู่คือการสร้างภาพเคลื่อนไหวของ background-positionเหมือนกับที่เราทำกับตัวโหลดก่อนหน้า แต่เพิ่มเส้นประของ background-size เพื่อให้ดูเหมือนหยดมากขึ้นเมื่อดูดซับจุด

หากคุณต้องการเข้าใจความมหัศจรรย์ที่อยู่เบื้องหลังเอฟเฟกต์หยด คุณสามารถอ้างถึง สไลด์แบบโต้ตอบเหล่านี้ (Chrome เท่านั้น) โดย อนา ทิวดอร์ เพราะเธอครอบคลุมหัวข้อได้ดีมาก!

นี่เป็นอีกหนึ่งแนวคิดของตัวโหลดดอท คราวนี้ใช้เทคนิคที่ต่างออกไป:

อันนี้เป็นเพียง 10 การประกาศ CSS และคีย์เฟรม องค์ประกอบหลักและองค์ประกอบหลอกสององค์ประกอบมีการกำหนดค่าพื้นหลังเดียวกันกับการไล่ระดับสีในแนวรัศมีหนึ่งรายการ แต่ละอันสร้างหนึ่งจุด รวมเป็นสามจุด แอนิเมชั่นจะย้ายการไล่ระดับสีจากบนลงล่างโดยใช้การหน่วงเวลาที่แตกต่างกันสำหรับแต่ละจุด..

โอ้และสังเกตว่าตัวอย่างนี้ใช้ CSS Grid อย่างไร ซึ่งช่วยให้เราสามารถใช้ประโยชน์จากค่าดีฟอลต์ของกริดได้ stretch การจัดตำแหน่งเพื่อให้องค์ประกอบเทียมทั้งสองครอบคลุมพื้นที่ทั้งหมดของพาเรนต์ ไม่ต้องปรับขนาด! ดันๆหน่อยกับ translate() และเราพร้อมแล้ว

ตัวอย่างเพิ่มเติม!

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

ต่อไป…

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

---

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

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