سازندهی لودر و اسپینر CSS
۱۲ لودر خالص CSS با تنظیم اندازه، رنگ و سرعت و کد آمادهی HTML و CSS.
روی هر لودر بزنید تا کد HTML و CSS همان یکی پایین ساخته شود.
دربارهی سازندهی لودر و اسپینر CSS
چرخاندن یک اسپینر با transform: rotate روی لایهی compositor مرورگر انجام میشود و رشتهی اصلی را اشغال نمیکند؛ اما اگر همان حرکت را با تغییر width یا margin بسازید، مرورگر مجبور است در هر فریم دوباره layout بگیرد و لودر دقیقاً وقتی صفحه شلوغ است کند میشود. هر ۱۲ لودر این ابزار با CSS خالص نوشته شدهاند و بهجز «موج دایرهای»، همگی فقط transform و opacity را انیمیت میکنند. اندازه، ضخامت، مدت هر دور و دو رنگ را تنظیم میکنید و کد HTML و CSS آماده را برمیدارید.
راهنمای استفاده از سازندهی لودر و اسپینر CSS
- 1
از گالری یکی از ۱۲ لودر را انتخاب کنید؛ کارت انتخابشده با حاشیهی فیروزهای مشخص میشود.
- 2
اندازه، ضخامت خط و مدت هر دور را با کشوییها تنظیم کنید؛ هر ۱۲ نمونه همزمان با همان مقادیر بهروز میشوند.
- 3
رنگ اصلی و رنگ دوم را انتخاب کنید و پسزمینهی پیشنمایش را روی تیره و روشن بگذارید تا کنتراست را در هر دو تم ببینید.
- 4
اگر لازم است متن aria-label را عوض کنید و گزینهی prefers-reduced-motion را بزنید.
- 5
کد HTML و CSS را جداگانه یا با هم کپی کنید و مستقیم در پروژه بگذارید.
پرسشهای متداول
این لودرها به جاوااسکریپت یا فایل تصویری نیاز دارند؟
نه. خروجی یک div ساده بههمراه چند قاعدهی CSS و بلوک keyframes است؛ هیچ SVG، GIF، فونت آیکونی یا اسکریپتی لازم نیست. چون انیمیشن سمت CSS اجرا میشود، حتی وقتی جاوااسکریپت صفحه هنوز اجرا نشده هم لودر میچرخد — که معمولاً دقیقاً همان لحظهای است که به لودر نیاز دارید.
چرا گزینهی prefers-reduced-motion انیمیشن را کاملاً خاموش نمیکند؟
خیلیها animation: none مینویسند، ولی این کار عنصر را روی فریم صفر قفل میکند؛ در «موج دایرهای» فریم صفر عرض صفر دارد و در «تپش» مقیاس و شفافیت پایین است، یعنی نشانگر عملاً ناپدید میشود و کاربر فکر میکند صفحه هنگ کرده. این ابزار بهجای خاموشکردن، مدت انیمیشن را چهار برابر میکند تا حرکت آرام شود ولی نشانگر دیده بماند.
کدام لودر برای موبایلهای ضعیف مناسبتر است؟
حلقه، پرهها، میلهها و نقطههای محوشونده فقط transform و opacity را انیمیت میکنند و روی GPU اجرا میشوند. «موج دایرهای» عمداً width و height را انیمیت میکند، چون شکلش بدون آن ساخته نمیشود؛ همین باعث layout مجدد در هر فریم است، پس آن را در اندازهی کوچک و فقط یکبار در صفحه به کار ببرید.
میتوانم رنگ را به متغیر CSS برندم وصل کنم؟
بله. انتخابگر رنگ مرورگر فقط با کد هگز کار میکند، بنابراین خروجی مقدار ثابتی مثل #22d3ee دارد؛ بعد از کپی کافی است آن را با var(--brand) جایگزین کنید. بهجای rgba(...) هم میتوانید color-mix(in srgb, var(--brand) 22%, transparent) بنویسید.