Single Element Loader: 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% (در پایین قرار می گیرد).

چرا استفاده از a 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 تا به نظر برسد که لکه با جذب نقاط بزرگتر می شود.

اگر می خواهید جادوی پشت آن اثر لکه ای را درک کنید، می توانید به آن مراجعه کنید این اسلایدهای تعاملی (فقط کروم) توسط آنا تودور زیرا او موضوع را به خوبی پوشش می دهد!

در اینجا ایده دیگری برای بارگذاری نقطه وجود دارد که این بار از تکنیک متفاوتی استفاده می کند:

این یکی فقط 10 اعلان CSS و یک فریم کلیدی است. عنصر اصلی و دو عنصر شبه آن دارای پیکربندی پس‌زمینه یکسان با یک گرادیان شعاعی هستند. هر کدام یک نقطه ایجاد می کند که در مجموع سه نقطه است. این انیمیشن با استفاده از تاخیرهای مختلف برای هر نقطه، گرادیان را از بالا به پایین حرکت می دهد.

اوه، و توجه داشته باشید که چگونه این نسخه نمایشی از CSS Grid استفاده می کند. این به ما امکان می دهد از پیش فرض شبکه استفاده کنیم stretch تراز کردن به گونه ای که هر دو عنصر شبه کل ناحیه والد خود را پوشش دهند. نیازی به سایز بندی نیست! اطراف را کمی فشار دهید translate() و ما آماده ایم

نمونه های بیشتر!

فقط برای اینکه اصل مطلب را پیش ببرم، می‌خواهم چند نمونه اضافی را برای شما بگذارم که واقعاً تغییراتی از آنچه ما به آن نگاه کرده‌ایم هستند. با مشاهده دموها، خواهید دید که رویکردهایی که در اینجا پوشش داده‌ایم، بسیار انعطاف‌پذیر هستند و تعداد زیادی امکان طراحی را در اختیار شما قرار می‌دهند.

بعدی…

خوب، بنابراین ما در این مقاله به لودرهای نقطه‌ای و در مقاله آخر به اسپینرها پرداختیم. در مقاله بعدی از این مجموعه چهار قسمتی، ما توجه خود را به نوع رایج دیگری از لودر معطوف خواهیم کرد: میله ها ما بسیاری از چیزهایی را که تا کنون آموخته‌ایم می‌گیریم و می‌بینیم که چگونه می‌توانیم آن‌ها را گسترش دهیم تا یک بارکننده عنصر واحد دیگر با کمترین کد و انعطاف‌پذیری بیشتر ایجاد کنیم.

---

Single Element Loader: The Dots در ابتدا منتشر شد ترفندهای CSS. تو باید دریافت خبرنامه.

• Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی رایگان.
• CryptoHawk. رادار آلت کوین امتحان رایگان.
• منبع: https://css-tricks.com/single-element-loaders-the-dots/