text-spinners : ساخت لودینگ زیبا با متن و CSS خالص

در این مطلب میخوام در مورد text-spinners برای شما توضیحاتی رو قرار بدم. با استفاده از این روش میتونین لودینگهای زیبایی رو با استفاده از متن و CSS خالص به وجود بیارید و دیگه نیازی به استفاده از GIF و تصویر و ... ندارید. این لودینگها با استفاده از CSS Animation ساخته میشن و شما در اونا تعدادی فریم رو مشخص میکنید و با استفاده از انیمیشن، هر فریم رو پشت سر هم نمایش میدین. در اینجا ما از متد step استفاده میکنیم که باعث میشه انیمیشن بصورت مرحله به مرحله انجام بشه و به جای اینکه پیوسته انیمیشن رو نمایش بده، اون رو بصورت گسسته و مرحله ای نمایش میده.

اگر با Command line کار کرده باشید، حتما با لودینگهای مربوط به اون برخورد داشتید. text-spinners از cli-spinners ایده گرفته و کاری کرده که این لودینگها در فضای وب هم مورد استفاده قرار بگیرن.

اگر از فونتهای مختلف استفاده کنید، ظاهر اونا کمی تغییر میکنه ولی در کل این لودینگها مستقل از فونت هستن و نیازی به قرار دادن فونت خاصی نیست. استفاده از این لودینگها خیلی راحت هست. در ابتدا باید فایل مورد نظر به تمامی استایلها رو وارد کنید:

در اینجا میتونین فایل بالا رو بهتر ببینید. در این فایل کلاسهای مختلفی وجود داره که با استفاده از هر کدام، اون لودینگ نمایش داده میشه. کلاسی که عمومی هست و باید برای همه مورد استفاده قرار بگیره، loading هست. برای استفاده میتونیم این کلاس رو به span بدیم، بصورت زیر:

همونطور که دیدید درون Span چیزی وارد نکردیم و فقط کلاس loading رو به اون نسبت دادم. در بالا برای بهبود موارد مربوط به Accessibility از ویژگی aria-hidden استفاده کردیم و اون رو برابر با true قرار دادیم. با اینکار Screen Reader ها از این المنت صرف نظر میکنن و اون رو برای کاربر نمیخونن. با موارد ساده بالا، لودینگ زیر به وجود میاد:

ممکنه از خودتون بپرسید که این لودینگها چطور ساخته میشن. ما در اینجا ساز و کار لودینگ بالا رو با هم بررسی میکنیم تا بتونیم هم از موارد دیگه استفاده کنیم و هم اینکه متناسب با نیاز خودمون لودینگ درست کنیم. کلاس loading بصورت زیر هست:

همونطور که میبینید در ابتدا display رو برابر با inline-block قرار دادیم و بعد از اون overflow رو hidden کردیم تا اگر چیزی از باکس مربوط به span بیرون زد، دیده نشود. مقدار ارتفاع رو هم مقدار ثابتی در نظر گرفتیم و با استاده از line-height، ارتفاع خطوط متنی رو مشخص کردیم. حالا باید برای این span، یک کلاس کاذب after درست کنیم و درون ویژگی content اون، متنهایی که میخوایم درون هر فریم لودینگ نمایش داده بشن رو قرار بدیم. در هر فریم باید تعداد کارکترهای برابری وارد بشه و اگر تعداد کاراکتر ها برابر نبودن باید بجای اونا space یا فضای خالی قرار بدیم. با اینکار عرض و ارتفاع همه فریم ها با هم برابر میشه. با دیدن تصویر زیر بهتر این ساز و کار رو متوجه خواهید شد:همونطور که میبینید 4 فریم رو به وجود آوردیم و درون after قرار دادیم. بعد از اون با استفاده از انیمیشن مرحله ای یا step، اونا رو یکی یکی جابجا کردیم و در هر بار فقط یک فریم نمایش داده میشه و بقیه موارد چون overflow برابر با hidden هست، مخفی هستن. کدهای مربوط به after بصورت زیر هست:

مهمترین موارد، ویژگی content و animation هستن. درون content فریمها رو قرار میدیم و درون animation، نحوه جابجا شدن فریمها رو مشخص میکنیم. درون ویژگی content، فریمها رو با استفاده از A از هم جدا میکنیم و این کارکتر همون Enter یا کارکتر رفتن به خط بعد هستش. میبینید که سه بار به خط بعد رفتیم و با اینکار 4 فریم رو به وجود آوردیم. فریم اول خالی، فریم دوم یک نقطه، فریم سوم دو نقطه و فریم چهارم 3 نقطه داره. متناسب با تعداد فریمها باید ورودی متد step در ویژگی animation رو مشخص کنیم. میبینید که در بالا همون 4 رو قرار دادیم. اسم انیمیشنی که باید اجرا بشه هم spin4 هست که کدهاش بصورت زیر هست:

میبینید که از translateY استفاده کردیم و 6em اون رو در جهت عمودی جابجا کردیم. این جابجایی در مدت زمان 2 ثانیه و طی 4 مرحله انجام خواهد شد. چون 4 فریم داشتیم و مقدار line-height رو هم در ابتدا برابر با 1.5em قرار دادیم، پس مقدار جابجا شدن رو برابر با 6em قرار دادیم. بقیه موارد هم به همین صورت هستن و میتونین خودتون اونا رو بررسی کنید. میتونین برای پیدا کردن کارکترهای بیشتر از لینک و این لینک کمک بگیرید. با استفاده از این سایت هم میتونین کدهای مختلف رو به هم تبدیل کنید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی