<div class="radikalwp-loader-morph"><//div>.radikalwp-loader-morph {
width: 44px;
height: 44px;
background: linear-gradient(135deg, #f59e0b, #ef4444);
animation: radikalwp-lmorph-spin 1.6s ease-in-out infinite;
}
@keyframes radikalwp-lmorph-spin {
0% { transform: rotate(0) scale(1); border-radius: 4px; }
50% { transform: rotate(180deg) scale(.8); border-radius: 50%; }
100% { transform: rotate(360deg) scale(1); border-radius: 4px; }
}درباره این اسنیپت
مربعی که می‌چرخد و گوشه‌هایش بین گرد و تیز تغییر شکل می‌دهند؛ لودر هیجان‌انگیز و خلاقانه. این لودر برای لحظه‌های انتظار — بارگذاری محتوا، آپلود یا پردازش — ساخته شده است. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المان‌ها بدون به‌هم‌ریختگی انجام میشود. رنگ‌ها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آن‌ها را با پالت برند خودتان هماهنگ کنید.
پرسش‌های متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۰ از ۶ رأی — برای امتیازدهی وارد شوید
دیدگاه‌ها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!